摘要：它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。頁(yè)面上，負(fù)責(zé)接收用戶操作等交互行為，執(zhí)行方法觸發(fā)對(duì)應(yīng)進(jìn)行回應(yīng)。狀態(tài)改變提交操作方法。集中存儲(chǔ)中對(duì)象的零散數(shù)據(jù)，全局唯一，以進(jìn)行統(tǒng)一的狀態(tài)管理。

當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，會(huì)需要多個(gè)組件依賴于同一狀態(tài)抑或是來自不同視圖的行為需要變更同一狀態(tài)。以前的解決辦法：

a.將數(shù)據(jù)以及操作數(shù)據(jù)的行為都定義在父組件;

b.將數(shù)據(jù)以及操作數(shù)據(jù)的行為傳遞給需要的各個(gè)子組件(有可能需要多級(jí)傳遞)

傳參的方法對(duì)于多層嵌套的組件將會(huì)非常繁瑣，并且對(duì)于兄弟組件間的狀態(tài)傳遞無能為力。在搭建下面頁(yè)面時(shí)，你可能會(huì)對(duì) vue 組件之間的通信感到崩潰 ，特別是非父子組件之間通信。此時(shí)就應(yīng)該使用vuex，輕松可以搞定組件間通信問題。

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。這里的關(guān)鍵在于集中式存儲(chǔ)管理。簡(jiǎn)單來說,對(duì) vue 應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理(讀/寫)。

Vuex實(shí)現(xiàn)了一個(gè)單向數(shù)據(jù)流，在全局擁有一個(gè)State存放數(shù)據(jù)，當(dāng)組件要更改State中的數(shù)據(jù)時(shí)，必須通過Mutation進(jìn)行，Mutation同時(shí)提供了訂閱者模式供外部插件調(diào)用獲取State數(shù)據(jù)的更新。而當(dāng)所有異步操作(常見于調(diào)用后端接口異步獲取更新數(shù)據(jù))或批量的同步操作需要走Action，但Action也是無法直接修改State的，還是需要通過Mutation來修改State的數(shù)據(jù)。最后，根據(jù)State的變化，渲染到視圖上。

Vue Components：Vue組件。HTML頁(yè)面上，負(fù)責(zé)接收用戶操作等交互行為，執(zhí)行dispatch方法觸發(fā)對(duì)應(yīng)action進(jìn)行回應(yīng)。

dispatch：操作行為觸發(fā)方法，是唯一能執(zhí)行action的方法。

actions：操作行為處理模塊,由組件中的$store.dispatch("action 名稱", data1)來觸發(fā)。然后由commit()來觸發(fā)mutation的調(diào)用 , 間接更新 state。負(fù)責(zé)處理Vue Components接收到的所有交互行為。包含同步/異步操作，支持多個(gè)同名方法，按照注冊(cè)的順序依次觸發(fā)。向后臺(tái)API請(qǐng)求的操作就在這個(gè)模塊中進(jìn)行，包括觸發(fā)其他action以及提交mutation的操作。該模塊提供了Promise的封裝，以支持action的鏈?zhǔn)接|發(fā)。

commit：狀態(tài)改變提交操作方法。對(duì)mutation進(jìn)行提交，是唯一能執(zhí)行mutation的方法。

mutations：狀態(tài)改變操作方法，由actions中的commit("mutation 名稱")來觸發(fā)。是Vuex修改state的唯一推薦方法。該方法只能進(jìn)行同步操作，且方法名只能全局唯一。操作之中會(huì)有一些hook暴露出來，以進(jìn)行state的監(jiān)控等。

state：頁(yè)面狀態(tài)管理容器對(duì)象。集中存儲(chǔ)Vue components中data對(duì)象的零散數(shù)據(jù)，全局唯一，以進(jìn)行統(tǒng)一的狀態(tài)管理。頁(yè)面顯示所需的數(shù)據(jù)從該對(duì)象中進(jìn)行讀取，利用Vue的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來進(jìn)行高效的狀態(tài)更新。

getters：state對(duì)象讀取方法。圖中沒有多帶帶列出該模塊，應(yīng)該被包含在了render中，Vue Components通過該方法讀取全局state對(duì)象。

雖然 Vuex 可以幫助我們管理共享狀態(tài)，但也附帶了更多的概念和框架。這需要對(duì)短期和長(zhǎng)期效益進(jìn)行權(quán)衡。
如果您的應(yīng)用夠簡(jiǎn)單，您最好不要使用 Vuex,因?yàn)槭褂?Vuex 可能是繁瑣冗余的。一個(gè)簡(jiǎn)單的?global event bus?就足夠您所需了。但是，如果您需要構(gòu)建一個(gè)中大型單頁(yè)應(yīng)用，您很可能會(huì)考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會(huì)成為自然而然的選擇。

首先要安裝vue-cli腳手架，對(duì)于大陸用戶，建議將npm的注冊(cè)表源設(shè)置為國(guó)內(nèi)的鏡像(淘寶鏡像），可以大幅提升安裝速度。

npm config set registry https://[registry.npm.taobao.org](http://registry.npm.taobao.org/)
npm config get registry//配置后可通過下面方式來驗(yàn)證是否成功
npm install -g cnpm --registry=[https://registry](https://registry/).npm.taobao.org
//cnpm安裝腳手架
cnpm install -g vue-cli
vue init webpack my-vue
cd my-vue
cnpm install
cnpm run dev

腳手架安裝好后，再安裝vuex

cnpm install vuex --save

這個(gè)小demo很容易用vue實(shí)現(xiàn)，核心代碼如下：

  

    
click {{count}} times,count is {{evenOrOdd}}
    +
    -
    increment if odd
    increment async
  
  ......
  export default {
  name: "HelloWorld",
  data() {
    return {
      count: 0
    };
  },
  computed: {
    evenOrOdd() {
      return this.count % 2 === 0 ? "偶數(shù)" : "奇數(shù)";
    }
  },
  methods: {
    increment() {
      this.count = this.count + 1;
    },
    decrement() {
      this.count = this.count - 1;
    },
    // 只有是奇數(shù)才加1
    incrementIfOdd() {
      if (this.count % 2 === 1) {
        this.count = this.count + 1;
      }
    },
    // 過兩秒才加1
    incrementAsync() {
      setInterval(() => {
        this.count = this.count + 1;
      }, 2000);
    }
  }
}

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {// 包含了多個(gè)直接更新state函數(shù)的對(duì)象
        INCREMENT(state) {
            state.count = state.count + 1;
        },
        DECREMENT(state) {
            state.count = state.count - 1;
        }
    },
    getters: {   // 當(dāng)讀取屬性值時(shí)自動(dòng)調(diào)用并返回屬性值
        evenOrOdd(state) {
            return state.count % 2 === 0 ? "偶數(shù)" : "奇數(shù)";
        }
    },
    actions: { // 包含了多個(gè)對(duì)應(yīng)事件回調(diào)函數(shù)的對(duì)象
        incrementIfOdd({ commit, state }) { // 帶條件的action
            if (state.count % 2 === 1) {
                commit("INCREMENT")
            }
        },
        incrementAsync({ commit }) { //異步的action
            setInterval(() => {
                commit("INCREMENT")
            }, 2000);
        }

    }
})
export default store //用export default 封裝代碼，讓外部可以引用

import store from "./store"
new Vue({
  el: "#app",
  router,
  store,//注冊(cè)上vuex的store: 所有組件對(duì)象都多一個(gè)屬性$store
  components: { App },
  template: ""
})

由于 store 中的狀態(tài)是響應(yīng)式的，當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。在組件中調(diào)用 store 中的狀態(tài)簡(jiǎn)單到僅需要在計(jì)算屬性中返回即可。改變store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutations。

import { mapActions, mapGetters, mapState, mapMutations } from "vuex";
...
 computed: {
    ...mapState(["count"]),
    ...mapGetters(["evenOrOdd"])
    }
  methods: {
    ...mapActions(["incrementIfOdd", "incrementAsync"]),
    ...mapMutations(["increment", "decrement"])
    }

有點(diǎn)必須要注意：HelloWorld.vue文件中increment函數(shù)名稱要跟store.js文件mutations中一致，才可以寫成 ...mapMutations(["increment", "decrement"])，同樣的道理，incrementIfOdd和incrementAsync也要和store.js文件actions保持一致。

先store.js文件里給add方法加上一個(gè)參數(shù)n

  mutations: {
    INCREMENT(state,n) {
      state.count+=n;
    },
    DECREMENT(state){
        state.count--;
    }
  }

然后在HelloWorld.vue里修改按鈕的commit( )方法傳遞的參數(shù)

 increment() {
      return this.$store.commit("INCREMENT",2);
    },
 decrement() {
      return this.$store.commit("DECREMENT");
    }

getters從表面是獲得的意思，可以把他看作在獲取數(shù)據(jù)之前進(jìn)行的一種再編輯,相當(dāng)于對(duì)數(shù)據(jù)的一個(gè)過濾和加工。getters就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。

例如：要對(duì)store.js文件中的count進(jìn)行操作，在它輸出前，給它加上100。

首先要在store.js里Vuex.Store()里引入getters

getters:{
     count:state=>state.count+=100
  }

然后在HelloWorld.vue中對(duì)computed進(jìn)行配置，在vue 的構(gòu)造器里邊只能有一個(gè)computed屬性，如果你寫多個(gè)，只有最后一個(gè)computed屬性可用，所以要用展開運(yùn)算符”…”對(duì)上節(jié)寫的computed屬性進(jìn)行一個(gè)改造。

 computed: {
   ...mapGetters(["count"])
}

actions和上面的Mutations功能基本一樣，不同點(diǎn)是，actions是異步的改變state狀態(tài)，而Mutations是同步改變狀態(tài)。

同步的意義在于這樣每一個(gè) mutation 執(zhí)行完成后都可以對(duì)應(yīng)到一個(gè)新的狀態(tài)（和 reducer 一樣），這樣 devtools 就可以打個(gè) snapshot 存下來，然后就可以隨便 time-travel 了。如果你開著 devtool 調(diào)用一個(gè)異步的 action，你可以清楚地看到它所調(diào)用的 mutation 是何時(shí)被記錄下來的，并且可以立刻查看它們對(duì)應(yīng)的狀態(tài)----尤雨溪

ps:如果想訪問源代碼，請(qǐng)猛戳git地址

如果覺得文章對(duì)你有些許幫助，歡迎在我的GitHub博客點(diǎn)贊和關(guān)注，感激不盡！

vuex官方文檔

Vuex 2.0 源碼分析