vuex學習一計數器

入口文件代碼：

import Vue from 'vue'
import store from './stone.js'
import App from './App.vue'


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

store 文件代碼：

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

Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        count: 0
    },
    mutations:{
        increment(state){
            state.count++;
        }
    },
    actions:{
        increment(state){
            state.count++;
        }
    }
})

組件代碼：

<template>
  <div id="app">
      當前狀態：{{ count }}
    <button @click="increment">count++</button>
  </div>
</template>

<script>
export default {
  methods:{
      increment:function(){
        this.$store.commit('increment');
      }
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
</script>