Vuexメモ

state

dataのようなもの 状態を表している

getter

computedのようなもの stateから別の値を算出するために用いられる。 ステートの値を書き換える力はない。 getterの中で他のgetterを使うことも可能

mutation

唯一stateを更新する役割。 methodsのようなもの。 第一引数に渡されたstateを更新する。 呼ぶときは、store.commit(mutation)のように呼ぶ。 この時第二引数に何らかの値を渡すと、mutationの第二引数に渡される。 この値のことをペイロードという。 まあメソッドの引数みたい感じ。 mutationの中ではsettimeoutのような非同期の処理は用いらない。

action

非同期処理や外部APIとの通信を行い、最終的にmutationを呼び出すために用いられる。 actionの定義はmutationに似ているが、第一引数にステートではなく、コンテキストと呼ばれる特別なオブジェクトが渡される。 コンテキストとは、state、getters、dispatch、commitが含まれる。 actionはmutationを実行するために用いられるため、commitが使われることが多い。 dispatchでactionを呼ぶ。 いろいろ複雑だが、流れ的には １、store.dispatch(incrementAction)でincrementActionというactionを呼び出す。 ２、incrementActionの中のcommit(incrementMutation)でincrementMutationというmutationを実行する。 という風なる。 dispatch→action→commit→mutationという感じにコードを追っていけば、実際に行われている処理にたどり着くであろう。

モジュール

ストアを分割して、ステート、ゲッター、ミューテーション、アクションを定義できる。

名前空間

モジュールを作って、ストアを分割するのだが、同じ名前のステートやミューテーションなどが出てきてしまうかもしれない。また、例えばAというゲッターがどこのモジュールのゲッターなのかわからなくなってしまう場合があるかもしれない。 そこで、モジュールを定義するときに、`namespaced: true` を記述することによって名前空間を設定できる。

const store = new Vuex.Store({
   state: {
      count: 1
   },
   
   getters: {
      double: state => state.count + state.count //state.countを2倍にして返す
   },

   mutations: {
      update (state, payload) {
         state.count = payload
      }
   },

   modules: {
      example: {
         namespaced: true, //ここで名前空間を設定
         
         getters: {
            triple: (state, getters, rootState, rootGetters) => {
   // rootState,rootGettersはそれぞれモジュールの外のstateとgetterにアクセスすることを示している
               return rootstate.count + rootGetters.double
            }
         },
      
         actions: {
            multiplyByFive (ctx) {
               const payload = ctx.rootGetters.double + ctx.getters.triple
               ctx.commit('update', payload, { root: true })
       // { root: true }をつけることによって、モジュール外のmutationにアクセスすることを示している
            }
         }
      }
   }
})

console.log(store.state.count) // -> 1

store.dispatch('example/multiplyByFive') 
//　この書き方によってexampleモジュールのアクションを呼び出している

console.log(store.state.count) // -> 5 

基本的にroot がついているものは、モジュール外（グローバル）のものにアクセスしている

ストアとコンポーネントの通信のヘルパー関数

ストアとコンポーネントの通信のヘルパー関数は、mapState、mapGetters、mapMutations、mapActionsがある。
基本的に、コンポーネントからストアにアクセスするときには、下記のようにthis.$store を使用する。

...
   computed: {
      count () {
         return this.$store.state.count
      }
   },
...

そこでヘルパー関数を使えば、上記のコードを下記のように短く書ける。

...
   computed: mapState([
      'count'
   ])
...

普通のcomputedも定義したいときは、

...
   computed: {
      double () {
         return this.count * 2
      },


      ...mapState([
      'count'
   ])
...

上記のように、先にcomputedを定義して、そのあとに...mapState と記述し始めればよい。