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

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

【Vue.js】Vuexインストール方法

大規模な開発に向いている状態管理パターンとライブラリ。 下記コマンドを実行 npm install vuex src直下にstore.jsを作成。importで読み込む。 state:はvue全体で使用できるグローバル変数。 main.js...

morymory.com

2020.02.15

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

【Vue.js】Vuexを使ってみる

インストール方法の記事はこちら↓ getters 計算式など複雑な式を含む関数をコンポーネントで使いまわしたい時、gettersを使用すると効率的になる。 store.jsに計算式を作成。gettersの中では、stateで定義したcoun...

morymory.com

2020.02.21

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>