為什么有 Vuex？

也許你已經(jīng)學(xué)習(xí)過(guò) Vue 組件通信的方式了，知道父?jìng)髯油ㄟ^(guò)props，子傳父通過(guò)this.$emit。這兩種方式有時(shí)確實(shí)很好用，也很簡(jiǎn)單。當(dāng)然，也許你還了解 事件總線 這種方法，但一般很少用它，在思想層面，事件總線 與 Vuex 是類(lèi)似的。既然如此，何不直接使用 Vuex 呢？

如果你有使用 vue-router 經(jīng)驗(yàn)的話，也知道組件的渲染除了直接引入，還有 <router-view>——路由視圖可以渲染組件。

props和this.$emit是在直接引入時(shí)才能使用。使用vue-router渲染組件的話便沒(méi)法再使用上述幾種方法傳遞數(shù)據(jù)。并且，如果你的數(shù)據(jù)在應(yīng)用的許多地方都使用到了，且這種數(shù)據(jù)的改變牽一發(fā)而動(dòng)全身的話，就必須使用 Vuex。

單向數(shù)據(jù)流

什么是單向數(shù)據(jù)流？

想一想，當(dāng)把一些廣泛使用的數(shù)據(jù)抽離到 vuex 中后，便會(huì)有一些數(shù)據(jù)是從 vuex 流向各個(gè)組件的。還有一部分?jǐn)?shù)據(jù)保留在 data 和 props 中。這些數(shù)據(jù)雜糅在一起，本身就已經(jīng)比較麻煩了。

如果還有數(shù)據(jù)從 vuex 流向各個(gè)組件，這些數(shù)據(jù)被濫用，那么數(shù)據(jù)的來(lái)源和去向?qū)㈦y以循跡，在維護(hù)組件時(shí)會(huì)非常頭疼。

例如，某個(gè)數(shù)據(jù)存儲(chǔ)在 state 中，這個(gè)數(shù)據(jù)在異步請(qǐng)求數(shù)據(jù)下來(lái)后需要進(jìn)行更新，只有在 state 中更新后數(shù)據(jù)流向全局，不能在某個(gè)組件里發(fā)起請(qǐng)求就直接在其頁(yè)面上渲染，這會(huì)導(dǎo)致數(shù)據(jù)的流向變得混亂。

拿父?jìng)髯印⒆觽鞲概e例，為什么傳遞一個(gè)數(shù)據(jù)需要使用兩種方法？一個(gè)使用props，一個(gè)使用this.$emit？這本身就是一種單項(xiàng)數(shù)據(jù)流，絕不允許數(shù)據(jù)在組件間隨意傳遞。

vuex 也是這樣，數(shù)據(jù)只能從其內(nèi)部流向組件。

Vuex 是什么？

Vuex 其實(shí)就是一個(gè)集中管理數(shù)據(jù)狀態(tài)的地方，官方之所以稱之為 狀態(tài)管理 而不是 數(shù)據(jù)管理，原因在于這里存儲(chǔ)的數(shù)據(jù)都是動(dòng)態(tài)的，隨時(shí)改變且發(fā)射到全局各個(gè)地方。

Vuex 應(yīng)用的核心在于一個(gè) store，也就是一個(gè)倉(cāng)庫(kù)。倉(cāng)庫(kù)的作用就是用來(lái)存放物品的。store 里有五個(gè)功能區(qū)域:

// 引入 Vue
import Vue from 'vue'
// 引入 Vuex
import Vuex from 'vuex'

// 全局使用
Vue.use(Vuex)

// 定義一個(gè)倉(cāng)庫(kù)
const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {}
})

// 導(dǎo)出這個(gè)倉(cāng)庫(kù)
export default store

state

第一個(gè)功能，是 state，即狀態(tài)的意思，這里存放所有的全局?jǐn)?shù)據(jù)，這里是倉(cāng)庫(kù)的唯一存儲(chǔ)區(qū)域。

const store = new Vuex.Store({
  // 數(shù)據(jù)放在這里
  state: {}
})

mutations

第二個(gè)功能，是 mutations，這里保存所有更改 state 中數(shù)據(jù)的方法。也就是說(shuō)，state 中的數(shù)據(jù)不能直接改變，所有的改變都要經(jīng)過(guò) mutations 方法。

例如，state 中有一個(gè) number，值為 0：

const store = new Vuex.Store({
  state: {
    number: 0
  }
})

要想改變這個(gè) number 的值，必須在 mutations 里定義一個(gè)方法：

const store = new Vuex.Store({
  state: {
    number: 0
  },
  mutations: {
    changeNumber (state) {
      state.number++
    }
  }
})

可以看到，這個(gè)自定義方法接收 state 對(duì)象作為參數(shù)，并對(duì) state 內(nèi)部數(shù)據(jù)進(jìn)行更改。

當(dāng)然，這個(gè)自定義方法 changeNumber 需要一個(gè)觸發(fā)條件，即，哪個(gè)組件用到了 number，并且希望更改它，就可以觸發(fā)這個(gè)方法。

actions

第三個(gè)功能是 actions。actions 存在的意義是為了執(zhí)行異步的對(duì) state 的更改操作。也就是說(shuō)，所有通過(guò)網(wǎng)絡(luò)請(qǐng)求改變 state 數(shù)據(jù)的操作都必須經(jīng)過(guò) actions。但 actions 的作用只是一個(gè)異步請(qǐng)求更改數(shù)據(jù)的集中，要改變 state 中的數(shù)據(jù)還是需要提交 mutations 中的方法。也就是說(shuō)，actions 的作用其實(shí)只是將數(shù)據(jù)更改的同步操作與異步操作區(qū)分開(kāi)而已。這樣利于數(shù)據(jù)的維護(hù)與管理，對(duì)于那些異步更改的數(shù)據(jù)可以更快定位。

actions: {
  // 執(zhí)行注冊(cè)請(qǐng)求，異步更新 token 與 user 信息】
  async registerFunc ({ commit }) {
    try {
      const res = await register()
      if (res.status === 200) {
        // 這里的 SaveToken 就是定義在 mutations 里的方法，actions 想要改變數(shù)據(jù)就必須提交這個(gè)方法
        commit('SaveToken', `Token ${res.data.user.token}`)
        commit('SaveUser', res.data.user)
    }
    return res
  } catch (err) {
    return Promise.reject(err.response)
  }
},

getters

getters 可以看作 vuex 中的計(jì)算屬性。其實(shí)，就是 state 中的衍生狀態(tài)。例如 state 中有一個(gè)數(shù)組，在組件中需要用到這個(gè)數(shù)組的一些過(guò)濾項(xiàng)。這時(shí)就可以使用 getters 方法，且和 computed 屬性一樣，這些數(shù)據(jù)會(huì)被緩存，只有更改后才會(huì)重新渲染。

getters 接收 state 作為第一個(gè)參數(shù)：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

getters 接收其他 getters 作為第二個(gè)參數(shù)：

getters: {
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

modules 因?yàn)楸容^難，本次不做介紹。

前面提到了這些方法的作用，但沒(méi)有提到如何在組件中使用他們。其實(shí)，因?yàn)槭侵苯釉谌肿?cè)的 Vuex，可以在任何地方使用 Vuex 中的數(shù)據(jù)。

例如，想要使用 state 中的數(shù)據(jù)，可以通過(guò)：

// 模板中
$store.state.數(shù)據(jù)

// js 中
this.$store.state.數(shù)據(jù)

使用 mutations:

this.$store.commit('方法名')

使用 actions：

this.$store.dispatch('方法名')

使用 getters:

this.$store.getters.數(shù)據(jù)

不僅僅是組件，在 JS 文件中也可以使用 store中的數(shù)據(jù)。只需要引入即可;

import store from '../store/index'

好了，這就是 Vuex 的簡(jiǎn)單入門(mén)。后面我們會(huì)講到傳遞參數(shù)以及其他的更為進(jìn)階的用法。歡迎關(guān)注。