院卒新人サラリーマンのメモ代わり

備忘としてのメモを記載

vuex

vuexでいくつかの状態を扱うためにモジュール化してみた。

モジュール化すると
this.$store.state.モジュール名.stateの値
のようにstateにアクセスする際にモジュール名を入れる必要がある。
アクション、ミューテーション、ゲッターはデフォルトでグローバルに登録されるから変更なし。

ローカルにするには名前空間を使う。
名前空間を使うにはnamespaced: true をつける
呼び出し方は
...mapState('moduleA', {
}
モジュール名を第一引数に渡す
this.$storeでアクセスできるかは知らない

この書き方に慣れとこう

import { mapState, mapMutations } from 'vuex'

computed: {
  ...mapState({
    'count'// `this.count` を `this.$store.state.count` にマッピング
  })
},
 methods: {
   ...mapMutations([
     'increment', // `this.increment()` を `this.$store.commit('increment')` にマッピング
   ])
}