本文github地址
首先我問看下完整的Vuex選項(xiàng)對(duì)象

new Vuex.Store({
  state,  //訪問狀態(tài)對(duì)象
  mutations,  //訪問觸發(fā)狀態(tài)
  getters,
  actions
});
//還有一個(gè)模塊的
export default new Vuex.Store({
  modules:{
    a:moduleA
  }
});

一、 state --- 訪問狀態(tài)對(duì)象

說明：也就是使用vuex中的數(shù)據(jù)
**1. **直接在組件中使用{{ $store.state.num }}
**2. **需要使用數(shù)據(jù)的組組件（此處是App.vue）中的計(jì)算屬性

a. 方式一

computed: {
    count(){
      return this.$store.state.num + '：方式一獲取的state數(shù)據(jù)';//this指的是main.js中的vue實(shí)例對(duì)象
    }
  }

b. 方式二，利用mapState

  import {mapState} from 'vuex'

  computed:mapState({
    // es箭頭函數(shù)寫法，好處箭頭函數(shù)中的this有穿透效果，直接是上上級(jí)
    // count: state => state.num + '：方式二獲取的state數(shù)據(jù)'
    // es5寫法
    count:function (state) {
      return state.num + '：方式二獲取的state數(shù)據(jù)'
    }
  })

c. 方式三,不對(duì)數(shù)據(jù)進(jìn)行計(jì)算（加工處理），當(dāng)數(shù)據(jù)較多的時(shí)候,數(shù)組形式

  computed:mapState([
    'counut'//這里必須state中的數(shù)據(jù)和此模板中的數(shù)據(jù)一個(gè)名字，也就類似組件定義的簡寫
  ])  

d. 方式四,不對(duì)數(shù)據(jù)進(jìn)行計(jì)算 ，當(dāng)數(shù)據(jù)較多的時(shí)候,json形式

推薦

  computed:mapState({
     count:'num'
  })

效果如下圖：

二、 Mutations--- 觸發(fā)狀態(tài)

說明：必須用commit觸發(fā)mutations中的方法
需求：在組件中傳入一個(gè)值給store.js

<button type="button" name="buttonAdd" @click="$store.commit('add',{a:10})">加一個(gè)</button>

const mutations = {
  //定義方法 --- 類似methods
  add(state,n){//state 是把上面的數(shù)據(jù)引入進(jìn)來的
    console.log(n);//傳入的第二參數(shù)的那個(gè)對(duì)象
    state.num+= n.a;
  }
}

1. 利用mapMutations引入sotre中的觸發(fā)狀態(tài)

<button type="button" name="buttonAdd" @click="add({a:10})">map=>加一個(gè)</button><!-- 傳值的話只需要在括號(hào)里傳，但要注意格式 -->
      <button type="button" name="buttonAdd" @click="minus">map=>減一個(gè)</button>

import {mapMutations} from 'vuex'

//因?yàn)榉椒ㄋ詫懺诮M件中的methods中
 methods:mapMutations([
     'add',
     'minus'
   ])

三、 getters --- 獲取者

注意：在vue2.x中的computed中不要使用箭頭函數(shù)，因?yàn)榧^函數(shù)中的this指的是上一層不是本層。

//組件中
import {mapGetters} from 'vuex'

computed:{
    /*count(){
      return this.$store.getters.num
    }*/
    //map對(duì)象方式獲取getters
    ...mapGetters({
      count:'num'//引進(jìn)是靜態(tài)的
    })
  },
//store.js文件中
const getters = {
  num:function (state) {
    return state.num;
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters
});

注意：..mapGetters({})使用了三個(gè)點(diǎn)“...”，由于vue-cli生成的依賴包中不能解析此語法，所以需要進(jìn)行如下配置。

1. npm install babel-preset-stage-2 --save-dev
2. 在.babelrc文件中加一個(gè)配置

["stage-2"]

四、 actions --- 異步狀態(tài)

和Mutations的區(qū)別是Mutations是同步狀態(tài)，Actions是異步狀態(tài)，可以調(diào)用Mutations中的狀態(tài)，異步的批處理的一個(gè)集合。

//組件中
<button type="button" name="buttonAdd" @click="addPlus">addPlus =>加二個(gè)</button>
      <button type="button" name="buttonAdd" @click="minusPlus">minusPlus</button>

import {mapActions} from 'vuex'

 methods:{
     ...mapMutations([
       'add',
       'minus'
     ]),
     ...mapActions([
       'addPlus',
     ]),
     ...mapActions({
       minusPlus:'minusPlus'
     })
   }

//store.js中
const actions = {
  addPlus(context){//context代表了整個(gè)的store
    context.commit('add',{a:2}); //每次加2
    setTimeout(()=>{
        context.commit('minus');
    },3000)
    console.log('Actions中的加');
  },
  minusPlus({commit}){//commit
    commit('minus')
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
});

五、 module --- 模塊化

當(dāng) state, mutations, getters,actions太多的時(shí)候，我們就需要分成不同組別的模塊組。

//組件中
  A模塊組中的num => {{  $store.state.a.numA }} 
  B模塊組中的num => {{  $store.state.b.numB }}
//store.js中
const moduleA ={
  state: {
    numA: 888
  }
}
const moduleB ={
  state: {
    numB: 666
  }
}

export default new Vuex.Store({
  modules:{
    a:moduleA,
    b:moduleB
  }
});

最終demo如下圖：