npm install vuex --save

import Vuex from 'vuex'
Vue.use(vuex)

const store = new Vuex.Store({
? ? // state 中存放的就是全局共享的數(shù)據(jù)
? ? state: { count: 0 }
})

new Vue({
? ? el: '#app',
? ? render: h => h(app),
? ? router,
? ? // 將創(chuàng)建的共享數(shù)據(jù)對(duì)象，掛載到 vue 實(shí)例中
? ? // 所有的組件，就可以直接從 store 中獲取全局的數(shù)據(jù)了
? ? store
})

// 創(chuàng)建store數(shù)據(jù)源，提供唯一的公共數(shù)據(jù)
const store = new Vuex.Store({
? ? state: { count:0 }
})

// 1. 從 vuex 中按需導(dǎo)入 mapState 函數(shù)
import { mapState } from 'vuex'

// 2. 將全局?jǐn)?shù)據(jù)，映射為當(dāng)前組件的計(jì)算屬性
computed: {
? ? ...mapState(['count'])
}

// 定義 Mutation
const store = new Vuex.Store({
? ? state:{
? ? ? ? count: 0
? ? }
}),
mutations:{
? ? add(state){
? ? ? ? //變更狀態(tài)
? ? ? ? state.count++
? ? }
}
?
// 觸發(fā)mutation
methods：{
? ? handle(){
? ? ? ? //觸發(fā) mutation 的第一種方式
? ? ? ? this.$store.commit('add')
? ? }
}

// 定義 Mutation
const store = new Vuex.Store({
? ? state:{
? ? ? ? count: 0
? ? },
? ? mutations:{
? ? ? ? addN(state,step){
? ? ? ? ? ? // 變更狀態(tài)
? ? ? ? ? ? state.count += step
? ? ? ? }
? ? }
})
?
?
// 觸發(fā)mutation
methods:{
? ? handle2(){
? ? ? ? // 在調(diào)用 commit 函數(shù)，觸發(fā) mutations 是攜帶參數(shù)
? ? ? ? this.$store.commit('addN',6)
? ? }
}

//1. 從 vuex 中按需導(dǎo)入 mapMutations 函數(shù)
import { mapMutations } from 'vuex'

methods:{
? ? ...mapMutations(['add','addN']),
? ? // 下面是在組件中的使用方法，此時(shí)映射的 add 和 addN 函數(shù)就相當(dāng)于當(dāng)前組件的方法，通過(guò)this調(diào)用即可
? ? btnHandle1(){
? ? ? ? this.add()
? ? }
? ? btnHandle2(){
? ? ? ? this.addN()
? ? }
}

// 定義 Action
const store = new Vuex.Store({
? ? state:{
? ? ? ? count: 0
? ? },
? ? mutations:{
? ? ? ? add(state){
? ? ? ? ? ? state.count++
? ? ? ? },
? ? ? ? //攜帶參數(shù)的形式
? ? ? ? addN(state,step){
? ? ? ? ? ? state.count += step
? ? ? ? }
? ? },
? ? actions:{
? ? ? ? addAsync(context){
? ? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? ? ? context.commit('add')
? ? ? ? ? ? },1000)?
? ? ? ? },
? ? ? ? // actions 攜帶參數(shù)的形式
? ? ? ? addAsyncN(context,step){
? ? ? ? ? ? setTimeout(()=>{
? ? ? ? ? ? ? ? context.commit('addN',step)
? ? ? ? ? ? },1000)
? ? ? ? }
? ? }
})
?
?
// 觸發(fā) Action
methods：{
? ? handle(){
? ? ? ? // 觸發(fā) actions 的第一種方式
? ? ? ? this.$store.dispatch('addAsync')
? ? },
? ? handle2(){
? ? ? ? // 觸發(fā) actions 時(shí)攜帶參數(shù)
? ? ? ? this.$store.dispatch('addAsyncN',6 )
? ? }
}

// 定義 getter
const store = new Vuex.Store({
? ? state:{
? ? ? ? count: 0
? ? },
? ? mutations:{},
? ? Actions:{},
? ? getters:{
? ? ? ? showNum: state => {
? ? ? ? ? ? return '當(dāng)前最新的數(shù)量是【'+ state.count +'】'
? ? ? ? }
? ? }
})

import { mapGetters } from 'vuex'
computed:{
? ? ...mapGetters(['showNum'])
}