vuex触ってみた

//main.js
import store from "./store" //追加

new Vue({
  el: '#app',
  store, //追加
  template: '<App/>',
  components: { App }
})
//これで子コンポーネントで毎回importしなくてもthis.$storeでアクセスできる

//store/index.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    plus(state, payload) { //stateは自分、payloadは渡された値
      state.count += payload;
    }
  }
});

export default store;

//state = data
//mutations = setter と理解しとけば大丈夫

export default {
  name: "app",
  // store,
  computed: {
    count(){ //算出プロパティで取り出す
      return this.$store.state.count;
    },
  },
  methods: {
    addCount(){
      //処理
      this.$store.commit('plus', 3); // 第一引数にmutation名、第二引数に渡す値
    },
  }
};
//mapStateとかあるけど、これらは省略記法だから最小構成はこんな感じ
//storeのactionは必要になったらで良い
//storeのgetterは現状取り出したときにイジれば済む、必要になったら作ればよい