<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

npm install vuex --save

yarn add vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
})

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

state: {
  num: 0
}

<div>{{ numAlias }}</div>

import { mapState } from 'vuex'
export default {
  //計算函數(shù)
  computed: mapState({
    // 傳字符串參數(shù) 'count' 等同于 `state => state.count`
    numAlias: 'num',//常用key是自己起的名隨便 value接收的數(shù)據(jù)
    // 箭頭函數(shù)可使代碼更簡練
    count: state => state.count,
    // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
    //可以定義其余的計算函數(shù)
  }),
  //或者這樣
  //計算函數(shù)
  computed: {
    mapState(['count'])
  }
}

<div>{{ $store.state.count }}</div>

mutations: {
	//increment自定義方法 store參數(shù)是store數(shù)據(jù), parameter參數(shù)是接收到的數(shù)據(jù),可不要
    increment (state, parameter) {
        // 變更狀態(tài)
        state.num++
    }
}

import { mapState, mapMutations } from 'vuex'
//方法
methods: {
	...mapMutations([
	    // mutations自定義的方法名
    	'increment'
    ]),
    love() {
    	// 直接this調(diào)用 this.increment('需要傳過去的數(shù)據(jù),可不要')
        this.increment('Bin')
    }
}

methods: {
    love() {
    	// this.$store.commit('自定義的名稱', '傳過去的數(shù)據(jù),可不傳')
    	this.$store.commit('increment', 'data')
    }
}

mutations: {
	//increment自定義方法 store參數(shù)是store數(shù)據(jù), parameter參數(shù)是接收到的數(shù)據(jù),可不要
    increment (state, parameter) {
        // 變更狀態(tài)
        state.num++
    }
},
actions: {
	//add 自定義方法 context是參數(shù)，可以把它當作vuex的實例
    add(context) {
    	//可以通過context.commit('mutations中需要調(diào)用的方法')
    	context.commit('increment')
    }
}

import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions([
      'add', // 將 `this.add()` 映射為 `this.$store.dispatch('add')`
      // `mapActions` 也支持載荷：
      'add' // 將 `this.add(amount)` 映射為 `this.$store.dispatch('add', amount)`
    ]),
    ...mapActions({
      add: 'add' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
    }),
    love() {
    	// 直接this調(diào)用 this.add('需要傳過去的數(shù)據(jù),可不要')
    	this.add(data)
    }
  }
}

methods: {
    love() {
    	// this.$store.dispatch('自定義的名稱', '傳過去的數(shù)據(jù),可不傳')
    	this.$store.dispatch('add', data)
    }
}

state: {
  num: 0
},
getters: {
    doneTodos: state => {
    	return state.num = 10
    }
}

<div>{{ doneTodos }}</div>

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  //計算函數(shù)
  computed: {
  	...mapState(['count']),
  	...mapmapGetters(['doneTodos'])
  }
}

<div>{{ $store.getters.doneTodos }}</div>