眾所周知，看文檔是很重要的
1. Vuex是什么
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式错沽。
可以認(rèn)為它是一個(gè)前端數(shù)據(jù)庫(kù)簿晓，可以隨時(shí)存取數(shù)據(jù)，對(duì)于整個(gè)前端是共享且同步的千埃。
2. 使用Vuex的好處
在以下兩種情況下憔儿，普通的方法是很麻煩做到，或者做不到的放可。
- 多個(gè)視圖依賴于同一狀態(tài)谒臼。
在兄弟組件中，維護(hù)同一狀態(tài)是無(wú)能為力的
- 來(lái)自不同視圖的行為需要變更同一狀態(tài)耀里。
就好像兩個(gè)頁(yè)面會(huì)互相影響蜈缤，這需要我們?cè)诿總€(gè)頁(yè)面加入傳值參數(shù)，代碼變得更難維護(hù)冯挎。
3. Vuex的核心概念
- State
用來(lái)存放組件之間共享的數(shù)據(jù)底哥。他跟組件中的data選項(xiàng)，只不過(guò)組件中data是用來(lái)存放組件的私有數(shù)據(jù)。 - Getter
有時(shí)候我們需要從 store 中獲取一些數(shù)據(jù)趾徽，使用Getter來(lái)獲取续滋，Getter可以對(duì)數(shù)據(jù)進(jìn)行操作，類似于computed孵奶。 - Mutation
更改 Vuex 的 store 中的狀態(tài)的唯一方法疲酌，且為同步方法，類似methods了袁。 - Action
Action會(huì)通過(guò)Mutation朗恳，讓Mutation幫他提交數(shù)據(jù)的變更。
Action支持異步請(qǐng)求 - Module
當(dāng)應(yīng)用變得非常復(fù)雜時(shí)载绿，store 對(duì)象就有可能變得相當(dāng)臃腫僻肖。Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state卢鹦、mutation臀脏、action、getter冀自、甚至是嵌套子模塊揉稚。
3. Vuex操作流程
image.png
- 登錄
- 首先調(diào)用
actions里的登錄方法（這里是一個(gè)異步的方法） - 返回結(jié)果后調(diào)用
mutations中的SET_INFO方法 - 而
SET_INFO去修改state中的userInfo信息
- 首先調(diào)用
- 獲取用戶信息
- 這里調(diào)用
getter中方法getUserInfo - 然后就會(huì)返回當(dāng)前
state中userInfo的數(shù)據(jù)
- 這里調(diào)用
- 修改用戶信息
- 類似獲取信息，這里調(diào)用
mutations中的SET_USERINFO方法 -
SET_USERINFO方法修改state中的userInfo
- 類似獲取信息，這里調(diào)用
總結(jié)：
-
state中只維護(hù)當(dāng)前需要存的數(shù)據(jù)熬粗，定義好即可 - 修改
state中的數(shù)據(jù)需要通過(guò)mutations中的方法 -
mutations中的方法必須為同步的搀玖，例如（state.token = token） - 修改
state中的數(shù)據(jù)需要通過(guò)getter中的方法 -
actions中可以使用異步方法
