個(gè)人對(duì)vuex的理解是，state中定義的變量類似java中的全局變量，將各組件用到的變量集中起來(lái)，統(tǒng)一管理，而getter,mutation,action就是針對(duì)這些全局變量的查詢和更新函數(shù)

• state

作用：全局變量存放的地方，可以是一個(gè)字符串、數(shù)據(jù)、對(duì)象等

定義：

export default new Vuex.Store({
    state:{
        count:0,
        price:0,
        metaInfo:{
            title:"這是一個(gè)標(biāo)題",
             keywords:"vuex,vue.js,vue-router",
        }
    }
})

• getter

作用：相當(dāng)于計(jì)算屬性

定義：

export default new Vuex.Store({
    state:{
        count:0,
        price:0,
        metaInfo:{
            title:"這是一個(gè)標(biāo)題",
             keywords:"vuex,vue.js,vue-router",
        }
    },
    getters:{
        getMoney: function(state){
            return state.count * state.price
        },
        getMoney2: function(state){
            return state.count * state.price
        },
    }
})

引用：

常規(guī)方式：

this.$store.getters.getMoney

mapGetters方式,有2種方式

? 1.使用對(duì)象的方法引用,這里可以同時(shí)引用多個(gè)

• ...mapGetters({getMoneyFromState : 'getMoney',getMoneyFromState2 : 'getMoney2'}), 
      
  ....
  
  this.getMoneyFromState  //使用時(shí)這樣調(diào)用
  

  2.使用名稱的方法引用

• ...mapGetters(['getMoney','getMoney2'])   //
  ...
  this.getMoney  //使用時(shí)這樣調(diào)用
  

1和2的效果是一樣的

說(shuō)白了，mapGetter只是提供了一種引用方式而已，避免每次引用寫那么長(zhǎng)的表達(dá)式

mapActions,mapMutations 都是這個(gè)思路

• mutation

作用：用于定義改變state中變量的方法，畢竟直接調(diào)用的方式不是太優(yōu)雅

定義：

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    count: 0,
    price: 5.5,
    metaInfo: {
      title: "這是一個(gè)標(biāo)題",
      keywords: "vuex,vue.js,vue-router"
    }
  },
  mutations: {
    updatePrice(state,price){
      state.price = price;
    },
    updateCount(state,count){
      state.count = count
    }
  }
})

每一個(gè)mutation方法帶兩個(gè)參數(shù),state和入?yún)?，mutation必須同步執(zhí)行

常規(guī)調(diào)用方法：

 this.$store.commit("updatePrice", val);

使用mapMutations方式：

export default {
  methods:{
      ...mapMutations([
        'updatePrice',
        'updateCount'
      ]),
     //使用時(shí)直接按方法調(diào)用即可
      inputPrice(price){
      this.updatePrice(price);
    }
  }
}

mutation是方法，所以這里要集成到methods里面

• action

作用：將mutation里面處理數(shù)據(jù)的方法變成可異步執(zhí)行的方法，一個(gè)action中可調(diào)用多個(gè)mutation方法

定義：

export default new Vuex.Store({
  state: {
    count: 0,
    price: 5.5,
    metaInfo: {
      title: "這是一個(gè)標(biāo)題",
      keywords: "vuex,vue.js,vue-router"
    }
  },
  getters:{
    getMoney: function(state){
      return state.count * state.price
  },
  getMoney2: function(state){
    return state.count * state.price
}
  },
  mutations: {
    updatePrice(state,price){
      state.price = price;
    },
    updateCount(state,count){
      state.count = count
    },
  actions: {
    updateOrderInfo(context,info)
    {
      context.commit('updatePrice',info.price);
      context.commit('updateCount',info.count);
    }
  },
  modules: {}
});

引用：

import {mapActions } from 'vuex'
methods:{
      ...mapActions(['updateOrderInfo']),
      inputPrice(){
      this.updatePrice(this.price);
      this.$store.state.price ;
    },
    getMyMoney(){
      this.updateOrderInfo({price:this.price,count:this.count});
    },
    getMyMoney2(){
      this.$store.dispatch('updateOrderInfo',{price:this.price,count:this.count});
    }
  }

常規(guī)方式,利用dispatch

this.$store.dispatch('updateOrderInfo',{price:this.price,count:this.count});

mapAction方式：

this.updateOrderInfo({price:this.price,count:this.count});

• 總結(jié)

state:用于定義全局變量

getter:將state封裝成計(jì)算屬性，便于獲取全局變量

mutation:定義改變state中全局變量的方式，這些方法都是同步的

action：定義改變state的異步方法

state,getter,mutation,action 都可以通過(guò)常規(guī)的this.$store來(lái)直接引用

mapGetters，mapActions，mapMutations只是定義了另外一種引用方式，避免每次寫長(zhǎng)的表達(dá)式，

用哪種方式，看個(gè)人喜好！