「vue基礎(chǔ)」寫(xiě)給 Vuex 初學(xué)者的使用指南

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

一、Vuex 簡(jiǎn)介

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

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

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

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

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

要掌握Vuex理解以下幾個(gè)概念很重要：

State

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

Store

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

Getters

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

Mutations

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

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

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

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

Actions

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

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

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

三、動(dòng)手做一個(gè)簡(jiǎn)單例子

接下來(lái)我們親自動(dòng)手做一個(gè)簡(jiǎn)單的練習(xí)，通過(guò)代碼進(jìn)一步的了解Vuex，廢話不多說(shuō)，我們開(kāi)始吧！

1、安裝 Vuex

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

npm?install?vuex

依賴安裝完成后，我們需要將 Vuex 的 Store 實(shí)例進(jìn)行注冊(cè)，接下來(lái)我們?cè)趕rc目錄里新建個(gè) store.js ，示例代碼如下：

src/store.js

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

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

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");

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

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

State 本身就是一個(gè) JS 對(duì)象，創(chuàng)建的數(shù)據(jù)可以在不同的組件中進(jìn)行共享，比如初始化一個(gè)購(gòu)物車的數(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ù)類型，接下來(lái)我們可以在組件中使用 computed 進(jìn)行數(shù)據(jù)的獲取，比如我們要獲取顧客的名字，示例代碼如下：