摘要：有興趣的同學可以查看之前發布的文章學習系列一學習實踐筆記附學習系列二學習實踐筆記附學習系列三和網絡傳輸相關知識的學習實踐學習系列四打包工具的使用學習系列五從來聊聊學習系列項目地址項目暫時有點亂，之后會進行整理優化。

上次學習了vue-router的使用，讓我能夠在各個頁面間切換，將頁面搭建了起來。這次則要學習vue的狀態管理模式——vuex。它類似于redux來應用的全局狀態。

注：本文只是個人對vuex學習的一些理解，要深刻掌握還需要認真查閱官方文檔。

Vuex 是一個專為 Vue.js 的SPA單頁組件化應用程序開發的狀態管理模式插件。
由于Vue SPA應用的模塊化，每個組件都有它各自的數據(state)、界面(view)、和方法(actions)。這些數據、界面和方法分布在各個組件中，當項目內容變得越來越多時，每個組件中的狀態會變得很難管理。這是vuex就派上用場啦~下面我們看一個簡單的vuex例子。

假如只是在單個組件中要改變界面view很簡單，只需要改變state數據源即可。如下代碼：

所以，單個組件中的原理圖是這樣的：

然而，我們作為組件化的SPA應用，必定會牽扯到多個組件間的通信。
比如有兩個相同的組件A和B，它們共享一個數據count，并且都有一個方法可以操作這個count，我們使用vuex來寫。
A組件和B組件的代碼（代碼相同）

可以看到，這里的兩個increment按鈕點擊都會同時改變兩個count的數據，因為數據源count和方法increment都是全局的。
正如下面官方原理圖所畫的，我們把全局數據源state、改變數據源的方法mutations、異步操作方法actions都放提取出來放到store中，實現全局數據狀態多帶帶管理的功能。

使用npm安裝并保存到package.json中：

npm install vuex --save

package.json

  "devDependencies": {
    ...
    "vuex": "^2.1.1",
    ...
  },

配置方式和路由的配置方式差不多

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)
//創建Store實例
const store = new Vuex.Store({
  // 存儲狀態值
  state: {
    ...
  },
  // 狀態值的改變方法,操作狀態值
  // 提交mutations是更改Vuex狀態的唯一方法
  mutations: {
    ...
  },
  // 在store中定義getters（可以認為是store的計算屬性）。Getters接收state作為其第一個函數
  getters: {
    ...
  },
  actions: { 
    ...
  }
})
// 要改變狀態值只能通過提交mutations來完成

/* eslint-disable no-new */
new Vue({
  el: "#app",
  template: "",
  components: { App },
  // 將store實例注入到根組件下的所有子組件中
  store
  // 子組件通過this.$store來方位store
})

state就是全局的狀態（數據源），我們可以用以下方式在Vue 組件中獲得Vuex的state狀態
template

  

    {{ $store.state.count }}
  

script

console.log(this.$store.state.count)

getters其實可以認為是 store 的計算屬性，用法和計算屬性差不多。
定義getter：

  getters: {
    done(state) {
      return state.count + 5;
    },
  }

使用getter

console.log(this.$store.getters.done)

mutations是操作state的唯一方法，即只有mutations方法能夠改變state狀態值。

mutations對state的操作

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀態
      state.count++
    }
  }
})

組件通過commit提交mutations的方式來請求改變state

this.$store.commit("increment")

這樣的好處是我們可以跟蹤到每一次state的變化，以便及時分析和解決問題。

mutations方法中是可以傳參的，具體用法如下：

  mutations: {
    // 提交載荷 Payload
    add(state, n) {
      state.count += n
    }
  },

this.$store.commit("add", 10)

這里只是傳了一個數字，在大多數情況下，載荷應該是一個對象，這樣可以包含多個字段并且記錄的 mutation 會更易讀。

mutations方法必須是同步方法！

之前說mutations方法必須只能是同步方法，為了處理異步方法，actions出現了。關于action和mutations的區別有以下幾點：

Action 提交的是 mutation，而不是直接變更狀態。

Action 可以包含任意異步操作。

Action 還是得通過 mutation 方法來修改state
同樣是之前的increment方法,我們分別用同步和異步的action來驗證上面所說的與mutations的不同之處：

  actions: {
    increment (context) {
      context.commit("increment")
    },
    incrementAsync (context) {
      // 延時1秒  
      setTimeout(() => {
        context.commit("increment")
      }, 1000)
    }
  },

不同于mutations使用commit方法，actions使用dispatch方法。

this.$store.dispatch("incrementAsync")

context是與 store 實例具有相同方法和屬性的對象。可以通過context.state和context.getters來獲取 state 和 getters。

    incrementAsyncWithValue (context, value) {
      setTimeout(() => {
        context.commit("add", value)
      }, 1000)
    }

this.$store.dispatch("incrementAsyncWithValue", 5)

使用單一狀態樹，導致應用的所有狀態集中到一個很大的對象。但是，當應用變得很大時，store 對象會變得臃腫不堪。
為了解決以上問題，Vuex 允許我們將 store 分割到模塊（module）。每個模塊擁有自己的 state、mutation、action、getters、甚至是嵌套子模塊——從上至下進行類似的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

module其實還是對于大型的SPA應用來說的，暫時對module的應用和理解并沒有太多，之后會補上這一塊兒的內容。
想要了解更多module知識，請查閱官方module文檔

作者最近正在惡補Vue的各種知識，希望能夠系統的掌握Vue的開發知識。有興趣的同學可以查看之前發布的文章：
Vue.js學習系列一 —— vue-router2學習實踐筆記（附DEMO）
Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）
Vue.js學習系列三——axios和網絡傳輸相關知識的學習實踐
Vue.js學習系列四——Webpack打包工具的使用
Vue.js學習系列五 —— 從VUE-CLI來聊聊ESLint

本文源碼已收入到GitHub中，以供參考，當然能留下一個star更好啦^-^。
https://github.com/violetjack...

VioletJack，移動、前端工程師，兩年移動端工作經驗、一年前端工作經驗。現專注于移動前端的學習和開發。擅長Android開發和Vue前端開發。會定期產出關于Android、Vue、移動前端相關的博文。歡迎大家關注我，我會用心維護和經營好博客，多產出高質量文章。同時也希望我所寫的東西可以幫到有需要的朋友。
新浪微博： http://weibo.com/u/2640909603
掘金：https://gold.xitu.io/user/571...
CSDN: http://blog.csdn.net/violetja...
簡書： http://www.jianshu.com/users/...
Github： https://github.com/violetjack