アウトプットするブログ

ブログの投稿ログ

2021年
9月
8月
7月
6月

Vueコンポーネント間の値をやりとり その3

以前親コンポーネント→子コンポーネント、子コンポーネント→親コンポーネントの値のやり取りを紹介しました。
しかし、状態管理をするVueXを使用すると同じ記述で親から子でも子から親へも値のやり取りを実現できます。

codesandbox

子コンポーネント
<template>
  <div class="todo">
    <div class="wrap">
      <h2>入力</h2>
      <input type="text" @keyup.enter="addText" />
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    addText: function (e) {
      var text = e.target.value;
      this.$store.dispatch("addTodo", {
        text: text,
      });
      e.target.value = "";
    },
  },
};
</script>

インプットタグにエンターキーを押すと発火するイベントを作成します。
その中に入力した値を$storeへディスパッチする処理を書きます。
それを実行した後input要素のvalueを空にして入力欄を空にします。

storeディレクトリを見てみましょう。

store/index.js

....
....
const store = new Vuex.Store({
  state: {
    text: ""
  },

  actions: {
    addTodo(context, todo) {
      context.commit("ADD_TODO", todo.text);
    }
  },

  mutations: {
    ADD_TODO(state, text) {
      state.text = text;
    }
  }
});

export default store;

stateに使用する値を書き込んでいきます。
actionで先ほどディスパッチした内容をmutations側に送ります。
mutationsでは入力欄で入力された値をstateに渡します。

親コンポーネント
<template>
  <div id="app">
    <HelloWorld />
    <p>{{ text }}</p>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  computed: {
    text() {
      return this.$store.state.text;
    },
  },
};
</script>

text関数の中で先ほどstateに定義した値をリターンします。
pタグ内でtextとして出力します。

まとめ

ざっくりですがVueXの使い方を説明しました。$store.state.hogeのように親であろうと子であろうとstoreに保存されていれば同じ表記で値を引っ張って来れるのが良いところです。
使い方次第でよりコードを管理しやすくなると思います。
以上です。