Vuex調査

App.vue

<template>
  <div>
    {{ storeCount }}
    {{ localCount }}
    {{ totalCount }}
    <input type="button" @click="storeCountIncrement" value="increment">
  </div>
</template>

<script>

export default {
  data: function(){
    return {
      count: 11,
    }
  },
  computed: {
    storeCount () {
      return this.$store.getters.storeCount;
    },
    localCount () {
      return `local count: ${this.count}`;
    },
    totalCount () {
      return this.$store.getters.totalCount(this.count);
    },

  },
  methods: {
    storeCountIncrement(){
      this.$store.dispatch('increment', {num: 1});
    }
  }
}
</script>

main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 1,
  },
  getters: {
    storeCount (state) {
      return `store count: ${state.count}`
    },
    totalCount(state) {
      return function(localCount){
        return `total count: ${state.count + localCount}`
      };
    }
  },
  mutations:{
    increment(state, payload){
        state.count += payload.num;
    }
  },
  actions: {
    increment(context, payload){
      context.commit('increment', payload);
    }
  }
})

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')