参考コード

  • state を変更するには mutaiton を使う
  • まずは mutation を定義する
  • changeNumber(state, value){} のように、mutation を実行する際に渡した引数を受け取ることもできる
/store/index.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
  appNumber: 0
};

const mutations = {
  changeNumber(state, value) {
    state.appNumber = state.appNumber + value;
  }
};

const store = new Vuex.Store({
  state,
  mutations
});

export default store;
  • mutaion を実行するには this.$store.commit("changeNumber", val) と commit する
/components/AppMain.vue
<template>
  <main>
    {{appNumber}}
    <Controller :changeNumber="changeNumber"/>
  </main>
</template>

<script>
import Controller from "./Controller";
export default {
  components: {
    Controller
  },
  computed: {
    appNumber() {
      return this.$store.state.appNumber;
    }
  },
  methods: {
    changeNumber(val) {
      this.$store.commit("changeNumber", val);
    }
  }
};
</script>