【Vue.js】Vuexを使ってみる～アクセッサーとv-model使って値のやり取りを行う～

vuexのインストール方法はこちら↓

vuexの使い方についてはこちら↓

v-modelをvuexで使う

入力した値を取得＆置き換えるときには、getterとsetterをcomputedの中で使用して、v-modelで双方向データバインディングを行う。

store.jsに値を格納する変数を定義し、getters,mutations,actionsに値の受け渡し＆受け皿を用意する。

値を受け取る変数　=　name

export default new Vuex.Store({
    state: {
        name: 'Mory',
    },
    getters: {
        name:state => state.name
    },
    mutations:{
        updateName(state,newName){
            state.name = newName
        }
    },
    actions:{
        updateName({commit},newName){
            commit('updateName',newName)
        }
    }
});

コンポーネントでsetterとgetterを用意し、値のセットと受け取りを行う。

<template>
  <div>
    <input type="text" v-model="name">
    <p>{{name}}</p>
  </div>
</template>

<script>
export defalut{
  computed:{
    name:{
      get(){
        return this.$store.getters.name;
      },
      set(value){
        this.$store.dispatch('updateName',value);
      }
    }
  }
};
</script>