Vue方向：Vuex狀態(tài)管理器的getter和state

1、安裝Vuex

? ? ? Vuex是一個(gè)專(zhuān)門(mén)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式慌申，通俗的來(lái)說(shuō)Vuex就是vue的一個(gè)插件雷激，作用就是幫助管理vue的狀態(tài)。

其中Vuex共有兩種安裝途徑

? ? ? ? 一是通過(guò)vue-cli腳手架的方式去構(gòu)建項(xiàng)目的時(shí)候厨幻，選中Vuex去安裝

圖示

? ? ? ? 二是通過(guò) npm 命令去安裝Vuex狀態(tài)管理器（這是將vuex安裝到開(kāi)發(fā)環(huán)境中去）

圖示

二相嵌、配置Vuex中的store

配置Vuex也有兩種方式

第一種，實(shí)例化Vuex的store對(duì)象去配置克胳，然后state放在store倉(cāng)庫(kù)中平绩，再將store暴露出去

代碼

第二種，腳手架的配置

? ? ? ? ? ? ? 通過(guò)vue示例中使用store選項(xiàng)漠另，是為了將store對(duì)象掛載到Vue的原型上去捏雌，這樣所有的組件內(nèi)部都可以使用this.store來(lái)操作store了

代碼

那么這個(gè)store中到底有些什么呢？打印this可以看到笆搓，其中有個(gè)$store性湿，就是所謂的狀態(tài)管理，下面有一些屬性方法之類(lèi)的

$store

三满败、單一狀態(tài)樹(shù)

? ? ? ? 單一狀態(tài)樹(shù)是什么意思呢肤频？我的個(gè)人理解就是說(shuō)明一個(gè)項(xiàng)目只有一個(gè)狀態(tài)，它不像組件算墨，不同的組件有自己的data選項(xiàng)宵荒，而這個(gè)單一狀態(tài)樹(shù)避免了狀態(tài)state的沖突，一個(gè)項(xiàng)目中只有一個(gè)净嘀。

? ? ? ? 既然一個(gè)項(xiàng)目中共有一個(gè)狀態(tài)state报咳，那么很顯然，這就是一個(gè)對(duì)象挖藏，而不是一個(gè)方法暑刃，這個(gè)對(duì)象作為唯一資源數(shù)據(jù)而存在。

下面畫(huà)了個(gè)草圖便于記憶

圖示

四膜眠、Vuex的數(shù)據(jù)獲取使用

? ? ? ? 在某個(gè)組件中可以直接將值存到Vuex.store中去岩臣，然后這時(shí)溜嗜，每個(gè)組件便都可以拿到這條數(shù)據(jù)。

代碼

結(jié)果1

結(jié)果2

五架谎、Vuex中的state的直接修改

? ? ? ? ? ? 這是一種直接修改Vuex,store倉(cāng)庫(kù)中的數(shù)據(jù)的一種方法炸宵，但是不推薦使用，因?yàn)檫@種方式去修改state不會(huì)被vue-devTool調(diào)試工具檢測(cè)到狐树，因此不推薦使用這種方式去修改焙压。

index.js

代碼

執(zhí)行結(jié)果

五、Getter的使用（ Vuex中的數(shù)據(jù)的過(guò)濾處理）

? ? ? 我們從store里的state中派生一些狀態(tài)出來(lái)抑钟，對(duì)于數(shù)據(jù)進(jìn)行過(guò)濾處理涯曲，在獲取數(shù)據(jù)之后再進(jìn)行過(guò)濾處理，那么同樣的邏輯可能需要在不同的地方使用在塔，在Vue中采用的方法是定義計(jì)算屬性幻件，Vuex提供了一個(gè)getter（類(lèi)似于store中的計(jì)算屬性），根據(jù)依賴(lài)狀態(tài)計(jì)算值后返回并緩存起來(lái)蛔溃，只有當(dāng)getter依賴(lài)的狀態(tài)發(fā)生改變時(shí)才會(huì)被重新計(jì)算绰沥。

代碼

結(jié)果

六、Getter的參數(shù)

? ? ? ? getter的第一個(gè)參數(shù)的狀態(tài)為state贺待，用于收獲getter的依賴(lài)狀態(tài)

參數(shù)

? ? getter的第二個(gè)參數(shù)就是選項(xiàng)getters徽曲，作用是用來(lái)獲取其他getter函數(shù)的◆锶可以用于在已經(jīng)過(guò)濾的狀態(tài)的基礎(chǔ)上再加以過(guò)濾秃臣。

圖示

七、可以通過(guò)方法去訪問(wèn)以及傳參

? ? ? 通常對(duì)于getter的使用方法，都是返回處理完畢后的數(shù)據(jù)，有時(shí)需要處理數(shù)據(jù)的條件是外部傳來(lái)的账锹，getter可以返回一個(gè)函數(shù)，這個(gè)函數(shù)用來(lái)接收外部傳遞的參數(shù)稚虎。

? ? ? ? getter返回的不是確定的值而是一個(gè)函數(shù),通過(guò)$store.getters.filterFruits獲取到的就是一個(gè)函數(shù),既然是函數(shù)就可以當(dāng)成方法使用, 傳遞參數(shù),例如 $store.getters.filterFruits(20)。

代碼