改めて学び直すVuex ref: https://qiita.com/nasum/items/d17c0a628e6c32616b85

file0.txt

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

file1.txt

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    countWithSuffix(state) {
      return `${state.count} 回`
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  }
})

const app = new Vue({
  el: '#app',
  computed: {
    showCounter() {
      return this.$store.getters.countWithSuffix
    }
  },
  store,
  methods: {
    increment() {
      this.$store.dispatch('increment')
    }
  }
})

file10.txt

methods: {
  increment() {
    this.$store.dispatch('increment')
  }
}

file11.txt

methods: {
  increment() {
    this.$store.dispatch({
      type: 'increment',
      num: 2
    })
  }
}

file12.txt

actions: {
  increment(context, payload) {
    context.commit({
      type: 'increment',
      num: payload.num
    })
  }
}

file2.html

<h1>Counter</h1>
<div id="app">
  <div>
    {{ showCounter }}
  </div>
  <button @click="increment">
    increment
  </button>
</div>

file3.txt

getters: {
  countWithSuffix(state) {
    return `${state.count} 回`
  }
},

file4.txt

mutations: {
  increment(state) {
    state.count++
  }
},

file5.txt

getters: {
  countWithSuffix(state, getters) {
    return `${getters.countWithPrefix} 回`
  },
  countWithPrefix(state) {
    return `第 ${state.count}`
  }
},

file6.txt

actions: {
  increment(context) {
    context.commit('increment')
  }
}

file7.txt

mutations: {
  increment(state, num) {
    state.count += num
  }
},
actions: {
  increment(context) {
    context.commit('increment', 1)
  }
}

file8.txt

mutations: {
  increment(state, payload) {
    state.count += payload.num
  }
},
actions: {
  increment(context) {
    context.commit({
      type: 'increment',
      num: 1
    })
  }
}

file9.txt

actions: {
  increment(context) {
    context.commit({
      type: 'increment',
      num: 1
    })
  }
}