text Vuexのアクションを理解する

Posted 2021-05-02

import 'babel-polyfill'
import Vue from 'vue'
import Vuex from 'vuex'
// プラグインを登録
Vue.use(Vuex)

// ストアを作成
export default new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    count: state => state.count
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    },
    decrement( { commit }) {
      commit('decrement')
    }
  },
  mutations: {
    // カウントアップするミューテーションを登録
    increment: state => state.count++,
    decrement: state => state.count--
  }
})

import Vue from 'vue'
import Router from 'vue-router'
import Sample from '@/views/Sample'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Sample',
      component: Sample
    }
  ]
})

import Vue from 'vue'
import App from './App'
import router from './router'
import store from '@/store/index.js'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

<template>
  <div>
    <p>{{ countNum }}</p>
    <button v-on:click="clickPlus">プラス</button>
    <button v-on:click="clickMinus">マイナス</button>
  </div>
</template>

<script>
export default {
  name: 'Sample',
  computed: {
    countNum() {
      return this.$store.getters.count
    }
  },
  methods: {
    clickPlus() {
      this.$store.dispatch('increment')
    },
    clickMinus() {
      this.$store.dispatch('decrement')
    }
  }
}
</script>

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  import Sample from '@/views/Sample.vue'
  export default {
    name: 'App',
    components: { Sample },
  }
</script>

<style>

</style>