State
????驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源，用于保存所有組件的公共數(shù)據(jù).。
Getter
????可以將 getter 理解為 store 的計(jì)算屬性, getters 的返回值會(huì)根據(jù)它的依賴(lài)被緩存起來(lái)，且只有當(dāng)它的依賴(lài)值發(fā)生了改變才會(huì)被重新計(jì)算。
Mutation
????mutations 對(duì)象中保存著更改數(shù)據(jù)的回調(diào)函數(shù),該函數(shù)名官方規(guī)定叫 type, 第一個(gè)參數(shù)是 state, 第二參數(shù)是payload, 也就是自定義的參數(shù)。mutation 必須是同步函數(shù)。mutations 對(duì)象里的方法需要使用 store.commit 調(diào)用
Action
????Action 提交的是 mutation 而不是直接變更狀態(tài)。action 可以包含任意異步操作。actions 對(duì)象里的方法需要使用 store.dispatch 調(diào)用mutation 去實(shí)現(xiàn)state的修改。
????Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過(guò) context.state 和 context.getters 來(lái)獲取 state 和 getters。
????
????
模塊化文件結(jié)構(gòu)

index.js

getters.js (這里把studentList過(guò)濾成2個(gè)屬性 stuName stuID)

stuentList.js
(Vuex官方推薦使用常量替代 Mutation 事件類(lèi)型 圖中SET_STU_NAME)
mutation 都有一個(gè)字符串的 事件類(lèi)型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler) 回調(diào)接收第一個(gè)參數(shù)是state，后面是要修改的參數(shù)
在action中提交Mutation去修改state（特別是我們需要調(diào)用 commit 很多次的時(shí)候,可以通過(guò)結(jié)構(gòu)的方法）

在組件中保存數(shù)據(jù)
通過(guò)this.$store.dispatch("<action的名稱(chēng)>", 要保存的狀態(tài))派發(fā)action
下圖將原狀態(tài) 張三和888修改為李四 和9999

瀏覽器界面

點(diǎn)擊換名稱(chēng)和換ID 狀態(tài)被保存和更換

總結(jié)

以上是生活随笔為你收集整理的VueX模块化使用（超级实用）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。