vuexに慣れるために

//store.js
//stateに変数、mustaitonsにstateのsetterを書く
//exportにモジュール名を書く

const countNum = {
  namespaced: true,
  state: {
    count: 0,
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--,
  },
}

const msgA = {
  namespaced: true,
  state: {
    scores: 0,
    message: '初期',
  },
  mutations: {
    saveData(state, payload) {
      state.scores = payload
    },
    changeMsg(state, payload) {
      state.message = payload
    },
  },

export default new Vuex.Store({
  modules: {
    countNum,
    msgA,
  },
})

//vueファイル
<script>
export default {
  computed: {
    count() {
      return this.$store.state.countNum.count
    }
  },
  methods: {
    increment() {
      this.$store.commit("countNum/increment")
    },
  }
};
</script>

//dataの共有方法
//computed内で
1, "this.$store.state.モジュール名.変数名"
2,    ...mapState('モジュール名',[
        '変数名'
        ]),

//dataの変更方法
//methods内で
1, "this.$store.commit('モジュール名/increment')"
2,    ...mapMutations('モジュール名', [
        'メソッド名',
        ]),

vuexのイメージ
各vueファイルに分散していたdataをstore.jsにまとめちゃう。
dataの値をいじる方法もstore.jsにまとめちゃう。
各vueファイルではstore.jsのdataとmethodsを自分のdataやmethodsに結びつける。

vuexの使いづらいところ。
メソッドを呼び出してどのdataがどう変更されたかがわかりにくい
→わかりやすいメソッド名をつける、コメントを入れる
mapHogeは若干読みづらい→省略記法だから慣れるまでは使わないでおこう