摘要：有興趣的同學(xué)可以查看之前發(fā)布的文章學(xué)習(xí)系列一學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列二學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列三和網(wǎng)絡(luò)傳輸相關(guān)知識(shí)的學(xué)習(xí)實(shí)踐學(xué)習(xí)系列四打包工具的使用學(xué)習(xí)系列五從來聊聊學(xué)習(xí)系列項(xiàng)目地址項(xiàng)目暫時(shí)有點(diǎn)亂，之后會(huì)進(jìn)行整理優(yōu)化。

上次學(xué)習(xí)了vue-router的使用，讓我能夠在各個(gè)頁面間切換，將頁面搭建了起來。這次則要學(xué)習(xí)vue的狀態(tài)管理模式——vuex。它類似于redux來應(yīng)用的全局狀態(tài)。

注：本文只是個(gè)人對(duì)vuex學(xué)習(xí)的一些理解，要深刻掌握還需要認(rèn)真查閱官方文檔。

Vuex 是一個(gè)專為 Vue.js 的SPA單頁組件化應(yīng)用程序開發(fā)的狀態(tài)管理模式插件。
由于Vue SPA應(yīng)用的模塊化，每個(gè)組件都有它各自的數(shù)據(jù)(state)、界面(view)、和方法(actions)。這些數(shù)據(jù)、界面和方法分布在各個(gè)組件中，當(dāng)項(xiàng)目?jī)?nèi)容變得越來越多時(shí)，每個(gè)組件中的狀態(tài)會(huì)變得很難管理。這是vuex就派上用場(chǎng)啦~下面我們看一個(gè)簡(jiǎn)單的vuex例子。

假如只是在單個(gè)組件中要改變界面view很簡(jiǎn)單，只需要改變state數(shù)據(jù)源即可。如下代碼：

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

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

可以看到，這里的兩個(gè)increment按鈕點(diǎn)擊都會(huì)同時(shí)改變兩個(gè)count的數(shù)據(jù)，因?yàn)閿?shù)據(jù)源count和方法increment都是全局的。
正如下面官方原理圖所畫的，我們把全局?jǐn)?shù)據(jù)源state、改變數(shù)據(jù)源的方法mutations、異步操作方法actions都放提取出來放到store中，實(shí)現(xiàn)全局?jǐn)?shù)據(jù)狀態(tài)多帶帶管理的功能。

使用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)
//創(chuàng)建Store實(shí)例
const store = new Vuex.Store({
  // 存儲(chǔ)狀態(tài)值
  state: {
    ...
  },
  // 狀態(tài)值的改變方法,操作狀態(tài)值
  // 提交mutations是更改Vuex狀態(tài)的唯一方法
  mutations: {
    ...
  },
  // 在store中定義getters（可以認(rèn)為是store的計(jì)算屬性）。Getters接收state作為其第一個(gè)函數(shù)
  getters: {
    ...
  },
  actions: { 
    ...
  }
})
// 要改變狀態(tài)值只能通過提交mutations來完成

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

state就是全局的狀態(tài)（數(shù)據(jù)源），我們可以用以下方式在Vue 組件中獲得Vuex的state狀態(tài)
template

  

    {{ $store.state.count }}
  

script

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

getters其實(shí)可以認(rèn)為是 store 的計(jì)算屬性，用法和計(jì)算屬性差不多。
定義getter：

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

使用getter

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

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

mutations對(duì)state的操作

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

組件通過commit提交mutations的方式來請(qǐng)求改變state

this.$store.commit("increment")

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

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

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

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

這里只是傳了一個(gè)數(shù)字，在大多數(shù)情況下，載荷應(yīng)該是一個(gè)對(duì)象，這樣可以包含多個(gè)字段并且記錄的 mutation 會(huì)更易讀。

mutations方法必須是同步方法！

之前說mutations方法必須只能是同步方法，為了處理異步方法，actions出現(xiàn)了。關(guān)于action和mutations的區(qū)別有以下幾點(diǎn)：

Action 提交的是 mutation，而不是直接變更狀態(tài)。

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

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

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

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

this.$store.dispatch("incrementAsync")

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

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

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

使用單一狀態(tài)樹，導(dǎo)致應(yīng)用的所有狀態(tài)集中到一個(gè)很大的對(duì)象。但是，當(dāng)應(yīng)用變得很大時(shí)，store 對(duì)象會(huì)變得臃腫不堪。
為了解決以上問題，Vuex 允許我們將 store 分割到模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getters、甚至是嵌套子模塊——從上至下進(jìn)行類似的分割：

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 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

module其實(shí)還是對(duì)于大型的SPA應(yīng)用來說的，暫時(shí)對(duì)module的應(yīng)用和理解并沒有太多，之后會(huì)補(bǔ)上這一塊兒的內(nèi)容。
想要了解更多module知識(shí)，請(qǐng)查閱官方module文檔

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

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

VioletJack，移動(dòng)、前端工程師，兩年移動(dòng)端工作經(jīng)驗(yàn)、一年前端工作經(jīng)驗(yàn)?，F(xiàn)專注于移動(dòng)前端的學(xué)習(xí)和開發(fā)。擅長(zhǎng)Android開發(fā)和Vue前端開發(fā)。會(huì)定期產(chǎn)出關(guān)于Android、Vue、移動(dòng)前端相關(guān)的博文。歡迎大家關(guān)注我，我會(huì)用心維護(hù)和經(jīng)營好博客，多產(chǎn)出高質(zhì)量文章。同時(shí)也希望我所寫的東西可以幫到有需要的朋友。
新浪微博： http://weibo.com/u/2640909603
掘金：https://gold.xitu.io/user/571...
CSDN: http://blog.csdn.net/violetja...
簡(jiǎn)書： http://www.jianshu.com/users/...
Github： https://github.com/violetjack