参考コード

  • コンポーネントが直接 mutation に commit するのは推奨しない
  • コンポーネントは action を実行するだけにする
  • まず action を定義する
  • action は mutation に commit する
/store/index.js
const actions = {
  changeNumber({ commit }, val) {
    commit("changeNumber", val);
  }
};

const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations
});
  • action を dispatch する
  • すると、action が実行され、action が mutaion へコミットする
/components/AppMain.vue
<script>
import Controller from "./Controller";
export default {
  components: {
    Controller
  },
  computed: {
    appNumber() {
      return this.$store.getters.appNumber;
    }
  },
  methods: {
    changeNumber(val) {
      this.$store.dispatch("changeNumber", val);
    }
  }
};
</script>