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

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

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

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

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

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

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

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

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

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

這時候，就需要用到我們的vuex了。

那么vuex 到底是什么？

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

是不是還是有點難以理解，其實簡單的說vuex就是把這個項目的所有數(shù)據(jù)都存儲在一個地方，方便修改和獲取數(shù)據(jù)。

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

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

Vue Components 表示vue里面的組件

Backend API 后臺API

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

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

在說state之前，我們可以先在我們vue項目引用vuex

npm install vuex

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

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

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

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

這里說一下吧，這里Store其實就是相當vuex實例化的一個倉庫。

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

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

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

// ~/src/store/index.js

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

那么，我們在組件里面怎么使用這個數(shù)據(jù)呢？

// me.vue組件文件

// ...

// ...

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

// ...

// ...

相當于

// ...

// ...

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

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

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

然后在me.vue里面引用

// ...

// ...

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

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

答案當然不是，vuex規(guī)定了，我們只能用Mutation來進行修改數(shù)據(jù)，那么，我們怎么進行修改數(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的出場了，其實不管怎么說，Action主要是為了與后臺交互而使用的屬性，這里，我就假設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")
      ]
    )
  }
}
// ...

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

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