大家好，在前面的幾篇文章里我們一起學(xué)習(xí)了Vue相關(guān)的基礎(chǔ)知識，想復(fù)習(xí)基礎(chǔ)的同學(xué)可以點擊文末鏈接進行回顧。今天我們將學(xué)習(xí) Vue 的 State Management（狀態(tài)管理）：Vuex，我們在構(gòu)建大型應(yīng)用時 ，State Management 的處理至關(guān)重要。

一、Vuex 簡介

隨著業(yè)務(wù)的增加，我們的應(yīng)用程序也變得越來越復(fù)雜，每個組件都有自己的數(shù)據(jù)狀態(tài)，再加上組件之間的數(shù)據(jù)傳遞問題，一個數(shù)據(jù)的變化會影響好幾個組件的連鎖反應(yīng)，這就增加了我們定位問題的難度。

因此要解決上述問題，我們就要集中管理數(shù)據(jù)，在多個組件中共享數(shù)據(jù)狀態(tài)時——比如用戶的登錄信息或者UI組件的呈現(xiàn)狀態(tài)（按鈕禁用或加載數(shù)據(jù)）。

幸運的是，我們不需要手工去完成 State Management 的工作，許多流行的框架都能幫助我們管理數(shù)據(jù)狀態(tài)，你可能聽說過Redux——React生態(tài)中比較流行的狀態(tài)管理解決方案。Vue當然也有自己的官方解決方案，稱作Vuex。他們共同的特點就是幫助我們集中管理數(shù)據(jù)狀態(tài)以及任何組件無需要父子關(guān)系，也能很容易進行數(shù)據(jù)之間的交互。

二、Vuex 相關(guān)的幾個概念術(shù)語

那我們?nèi)绾问褂肰uex呢？在使用之前，我們先看下下張圖，這張圖很好的詮釋了 Vuex 的運行機制，理解了這張圖，你就可以很快的上手Vuex的使用了。

要掌握Vuex理解以下幾個概念很重要：

State

單一狀態(tài)樹，整個應(yīng)用的數(shù)據(jù)源，組件的數(shù)據(jù)操作都會回流數(shù)據(jù)源，其是整個應(yīng)用唯一的數(shù)據(jù)中心，相當一個數(shù)據(jù)倉庫。

Store

數(shù)據(jù)中心的管家，我們首先需要在Vue里實例化在store對象，才能進行 Vuex 相關(guān)特性的應(yīng)用，其中包含組件的共享狀態(tài)state和改變狀態(tài)的方法（暫且稱作方法）mutations、Actions等。外部組件無法進行直接更改State，只能依賴dispatch action（行為調(diào)度） 或 commit a mutation（提交mutation）間接操作。

Getters

Getters 的本質(zhì)就是 Vuex store 的 computed 屬性，讀取 store/state 的內(nèi)容，Getters中的數(shù)據(jù)將會被緩存，如果你需要在多個數(shù)據(jù)中共享同樣的數(shù)據(jù)，使用 Getters 將會是一個不錯的選擇。

Mutations

在應(yīng)用中共享全局數(shù)據(jù)狀態(tài)時，也會導(dǎo)致一些問題，因為數(shù)據(jù)的改變可以來自任何組件，因此很難定位和跟蹤數(shù)據(jù)的狀態(tài)。

因此 Vuex 提出了使用 ?Mutations ?這種方式進行更改數(shù)據(jù)的狀態(tài)，并不是直接進行更改，其 Vue devtools 工具能很好很準確幫我定位哪些更改以及何時進行的更改。

如果你使用過 Redux ，Mutations 的概念很類似 reducer，其作用也是對數(shù)據(jù)狀態(tài)進行更改，更改 Vuex 的 store 中的數(shù)據(jù)狀態(tài)的唯一方法是提交 mutation，但是僅限于同步的數(shù)據(jù)操作。

在外部組件調(diào)用 Mutations時，你需要使用 this.$store.commit(mutation) 方法進行調(diào)用，而不能直接進行調(diào)用。

Actions

Actions：類似于Mutation ，但是Mutations只能處理同步函數(shù)，而Actions則是可以處理任何的異步操作。Actions 提交的是 Mutations，而不是直接變更狀態(tài)。也就是說，Actions會通過mutations，讓mutations幫他提交數(shù)據(jù)的變更。比如我們常用的接口數(shù)據(jù)請求獲取數(shù)據(jù)，就會經(jīng)常用到Actions。

如果要執(zhí)行異步任務(wù)或多個相關(guān)的Mutations去更新數(shù)據(jù)狀態(tài)時，我們需要 Actions 去定義函數(shù)進行操作，Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象，其可以獲 state , commit 和 getters 的相關(guān)屬性，因此你可以調(diào)用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。因此在其內(nèi)部我們能編寫更復(fù)雜的業(yè)務(wù)邏輯。

最后做下總結(jié)，我們使用 Store/State ?定義和管理應(yīng)用的核心數(shù)據(jù)，如果在多個組件中共享同一個數(shù)據(jù)，我們可以創(chuàng)建compute屬性調(diào)用 Getters 中的定義的方法。如果我們要異步或復(fù)雜的操作數(shù)據(jù)，我們可以通過使用 dispatch 方法調(diào)用已注冊的 Actions 方法，Actions 再去調(diào)用相關(guān)的 mutations 進行數(shù)據(jù)的操作。如果只是簡單的數(shù)據(jù)操作，使用 this.$store.commit() 方法調(diào)用 Mutations 即可。

三、動手做一個簡單例子

接下來我們親自動手做一個簡單的練習(xí)，通過代碼進一步的了解Vuex，廢話不多說，我們開始吧！

1、安裝 Vuex

假設(shè)我們通過 CLI 工具創(chuàng)建了一個Vue 項目（使用默認預(yù)設(shè)），如果我們要使用 Vuex 就要安裝相關(guān)依賴，安裝命令如下：

npm?install?vuex

依賴安裝完成后，我們需要將 Vuex 的 Store 實例進行注冊，接下來我們在src目錄里新建個 store.js ，示例代碼如下：

src/store.js

import?Vue?from?"vue";
import?Vuex?from?"vuex";
Vue.use(Vuex);
export?default?new?Vuex.Store({
??state:?{},
??mutations:?{},
??actions:?{}
});

我們在 Vuex.store 構(gòu)造函數(shù)里傳入一個對象，含有 state , mutations 及actions 這幾個核心屬性，不用擔(dān)心，我們來一步步逐一實現(xiàn)，接下來我們打開 main.js 文件，在Vue全局實例里進行注冊Store實例，示例代碼如下：

src/main.js

import?Vue?from?"vue";
import?App?from?"./App.vue";
import?store?from?"./store";
Vue.config.productionTip?=?false;
new?Vue({
??store,
??render:?h?=>?h(App)
}).$mount("#app");

完成上述操作后，我們就能很方便的通過 this.$store 訪問 store 實例內(nèi)容。

2、在 State 里初始化數(shù)據(jù)

State 本身就是一個 JS 對象，創(chuàng)建的數(shù)據(jù)可以在不同的組件中進行共享，比如初始化一個購物車的數(shù)據(jù)，示例代碼如下：

export?default?new?Vuex.Store({
??state:?{
????customerName:?'John?Smith',
????shoppingCart:?[
??????{
????????name:?'Jumbo?Box?of?Teabags',
????????quantity:?1,
????????price:?350
??????},
??????{
????????name:?'Packet?of?Fancy?Biscuits',
????????quantity:?1,
????????price:?199
??????},
????]
??},
});

狀態(tài)屬性的值可以包含任何有效的JS數(shù)據(jù)類型，接下來我們可以在組件中使用 computed 進行數(shù)據(jù)的獲取，比如我們要獲取顧客的名字，示例代碼如下：