摘要：說實(shí)在話，我在閱讀文檔的時(shí)候，也很難以去理解，甚至覺得沒有使用它我也可以。介紹那么到底是什么引用官網(wǎng)的說法就是是一個(gè)專為應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

先說句前話，如果不是接觸大型項(xiàng)目，不需要有多個(gè)子頁面，不使用vuex也是完全可以的。

說實(shí)在話，我在閱讀vuex文檔的時(shí)候，也很難以去理解vuex，甚至覺得沒有使用它我也可以。但是直到我在項(xiàng)目碰到下面這些問題：

當(dāng)路由切換的時(shí)候，原本路由的數(shù)據(jù)太多，傳遞過去太麻煩。

有些數(shù)據(jù)是多個(gè)路由需要用到的，那我就需要從后臺(tái)獲取多次數(shù)據(jù)

當(dāng)然，這些問題都可以解決，就是在實(shí)例化vue對(duì)象的時(shí)候，就將這些數(shù)據(jù)綁定在window對(duì)象上面。但是我們也不得不設(shè)想：

萬一數(shù)據(jù)太多了，那么可閱讀性是不是會(huì)下降

如果只是修改多帶帶的數(shù)據(jù)，是不是所有的頁面都可以更新

對(duì)于第一個(gè)問題，答案是肯定的，雖然說，我們現(xiàn)在也可以用模塊化的思想去使可閱讀性更加好，但是沒有一個(gè)規(guī)范，對(duì)于剛?cè)胧猪?xiàng)目的總是難以理解。

對(duì)于第二個(gè)問題，當(dāng)你頁面少的時(shí)候，是不會(huì)出現(xiàn)這樣的問題的，但是如果頁面多了，你就會(huì)發(fā)現(xiàn)，當(dāng)你把window.$data里面的數(shù)據(jù)更新的時(shí)候，所有頁面的計(jì)算屬性都會(huì)失效，就是你無論怎么修改數(shù)據(jù)，頁面都不會(huì)更新數(shù)據(jù)。

這時(shí)候，就需要用到我們的vuex了。

那么vuex 到底是什么？

引用官網(wǎng)的說法就是Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

是不是還是有點(diǎn)難以理解，其實(shí)簡(jiǎn)單的說vuex就是把這個(gè)項(xiàng)目的所有數(shù)據(jù)都存儲(chǔ)在一個(gè)地方，方便修改和獲取數(shù)據(jù)。

例如，我們從下面這張圖給大家先簡(jiǎn)單的分析一下

在這張圖片里面我們很明顯可以看到三個(gè)部分

Vue Components 表示vue里面的組件

Backend API 后臺(tái)API

vuex 組件里面的數(shù)據(jù)管理

我們可以生動(dòng)形象的理解，如果說Vuex是一個(gè)倉庫，那么么Vue Components就就是售貨者，負(fù)責(zé)把倉庫里面的東西展現(xiàn)出來，Backend API就相當(dāng)于入貨的人，負(fù)責(zé)將貨物買進(jìn)來（也就是后臺(tái)返回?cái)?shù)據(jù)給前端，保存在vuex里面）。而vuex就是倉庫，這個(gè)倉庫里面有貨物state，有管理貨物進(jìn)出的Muations

在說state之前，我們可以先在我們vue項(xiàng)目引用vuex

npm install vuex

然后在我們的src目錄下新建一個(gè)store的文件夾，在store文件夾里面新建一個(gè)index.js的文件

// ~/src/store/index.js
import Vue from "Vue"
import Vuex from "Vuex"

// 在這里聲明實(shí)例一個(gè)Vue 去引用Vuex狀態(tài)管理插件
// 這樣就可以減少在main.js里面的代碼量了
Vue.use(Vuex)

// 返回store實(shí)例對(duì)象
export default new Vuex.Store({
})

這里說一下吧，這里Store其實(shí)就是相當(dāng)vuex實(shí)例化的一個(gè)倉庫。

為什么說state是data的替代者呢？

很容易理解，就是講組件里面的局部參數(shù)，改成了一個(gè)可以全局使用的參數(shù)state，例如，我們?cè)趍e.vue組件引用的數(shù)據(jù)todo。

那么我們可以在store里面這樣實(shí)例化它出來

// ~/src/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  }
})

那么，我們?cè)诮M件里面怎么使用這個(gè)數(shù)據(jù)呢？

// me.vue組件文件

// ...

// ...

是不是很簡(jiǎn)單，但是我們不可能每次使用這個(gè)值都要獲取一次吧，這些vue團(tuán)隊(duì)也都想好了，我們可以通過計(jì)算屬性來獲取state里面的數(shù)據(jù)。

// ...

// ...

相當(dāng)于

// ...

// ...

有時(shí)候我們會(huì)需要對(duì)state的數(shù)據(jù)進(jìn)行一些過濾操作，例如我們只要在todo里面大于10的數(shù)字，如果是用computed的話，我們就需要使用filter函數(shù)，為了更加簡(jiǎn)便，vuex也給我們提供了計(jì)算屬性getter。

我們可以修改我們的~/src/store/index文件

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  }
})

然后在me.vue里面引用

// ...

// ...

這樣就可以簡(jiǎn)單拿到大于10的todo數(shù)據(jù)了

我們說了怎么獲取數(shù)據(jù)，但是我們應(yīng)該怎么修改數(shù)據(jù)呢，是不是直接賦值給數(shù)據(jù)就可以了呢？

答案當(dāng)然不是，vuex規(guī)定了，我們只能用Mutation來進(jìn)行修改數(shù)據(jù)，那么，我們?cè)趺催M(jìn)行修改數(shù)據(jù)呢？
修改我們的~/src/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  }
})

然后在我們的me.vue組件里面修改

// ...
// 在多帶帶構(gòu)建的版本中輔助函數(shù)為 Vuex.mapGetters
import { mapGetters } from "vuex"
// 在多帶帶構(gòu)建的版本中輔助函數(shù)為 Vuex.mapMutations
import { mapMutations } from "vuex"

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 為 store.state.todo
      "todo"
    ])
  },
  method: {
    ...mapMutations(
      [
        // 將 `this.revsiseTode()` 映射為 `this.$store.commit("revsiseTode")`
        // 如果想傳遞參數(shù)可以使用this.$store.commit("revsiseTode", oneTode)
        // 或者Action
        "revsiseTode" 
      ]
    )
  }
}

寫了這么久，終于到了Action的出場(chǎng)了，其實(shí)不管怎么說，Action主要是為了與后臺(tái)交互而使用的屬性，這里，我就假設(shè)todo的數(shù)據(jù)在路由/me/gettodo里面能夠獲取，因此，修改~/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  },
  actions: {
    getTodo: context => Vue.http.get("/me/gettodo", (res) => {
      context.commit("revsiseTode", res.body.todo)
    })
  }
})

然后就可以通過觸發(fā)我們的actions來提交mutations去修改state的數(shù)據(jù)了，在me.vue修改

// ...
// 在多帶帶構(gòu)建的版本中輔助函數(shù)為 Vuex.mapGetters
import { mapGetters } from "vuex"
// 在多帶帶構(gòu)建的版本中輔助函數(shù)為 Vuex.mapMutations
import { mapActions } from "vuex"

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 為 store.state.todo
      "todo"
    ])
  },
  method: {
    ...mapActions(
      [
        "reviseTodo", // 將 `this.reviseTodo()` 映射為 `this.$store.dispatch("reviseTodo")
      ]
    )
  }
}
// ...

上面主要只是簡(jiǎn)單的講了一下vuex的使用，也只是講了一部分，不過相信看了這里之后再去官網(wǎng)就會(huì)有更深的理解。當(dāng)然這些都是簡(jiǎn)單的使用，如果想把vuex運(yùn)用到項(xiàng)目，必須把他們模塊化更加好看，vuex官網(wǎng)也為我們提供了規(guī)范的項(xiàng)目目錄結(jié)構(gòu)，我這里就不多啰嗦幾句了。

vuex其實(shí)不難，我一開始也以為很難一直學(xué)不會(huì)，只要多使用就會(huì)覺得，其實(shí)也就只是別人都封裝好了的方法，我們?nèi)ナ褂眠@個(gè)簡(jiǎn)便的倉庫就行了。