参考コード

  • this.$store.state を使うと、mutation を介さずに直接 state を変更できてしまう。これは秩序が崩れるのでよくない。
  • 直接 state を参照せず、getter を経由して参照することを強く推奨する
/store/index.js
const getters = {
  appNumber(state) {
    return state.appNumber;
  }
};

const store = new Vuex.Store({
  state,
  getters,
  mutations
});
  • this.$store.getters.appNumber と getter 経由で取得する
  • こうすれば直接 state を変更することができず、秩序が保たれる
/components/AppMain.vue
<script>
import Controller from "./Controller";
export default {
  components: {
    Controller
  },
  computed: {
    appNumber() {
      return this.$store.getters.appNumber;
    }
  },
  methods: {
    changeNumber(val) {
      this.$store.commit("changeNumber", val);
    }
  }
};
</script>