参考コード

  • store は Vuex の中心的な機能。様々なものがここに集中している。
  • まずは store を作る
  • store を作る際に（new Vuex.Store({})）に state の設定を渡す
  • state は今までやってきた data のようなもの
/store/index.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
  appNumber: 0
};

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

export default store;
  • 作った store を読み込む
  • new Vue({}) に store を渡す
  • これで使用する準備は完了
main.js
import Vue from "vue";
import App from "./App.vue";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");
  • this.$store.state.appNumber で Vuex の store にある state を参照できる
  • 元の data はもう使っていない
/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.appNumber = this.appNumber + val;
    }
  }
};
</script>