VueX模块化使用(超级实用)
State
????驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源,用于保存所有組件的公共數(shù)據(jù).。
Getter
????可以將 getter 理解為 store 的計(jì)算屬性, getters 的返回值會(huì)根據(jù)它的依賴被緩存起來,且只有當(dāng)它的依賴值發(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,或者通過 context.state 和 context.getters 來獲取 state 和 getters。
????
????
模塊化文件結(jié)構(gòu)
index.js
getters.js (這里把studentList過濾成2個(gè)屬性 stuName stuID)
stuentList.js
(Vuex官方推薦使用常量替代 Mutation 事件類型 圖中SET_STU_NAME)
mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler) 回調(diào)接收第一個(gè)參數(shù)是state,后面是要修改的參數(shù)
在action中提交Mutation去修改state(特別是我們需要調(diào)用 commit 很多次的時(shí)候,可以通過結(jié)構(gòu)的方法)
在組件中保存數(shù)據(jù)
通過this.$store.dispatch("<action的名稱>", 要保存的狀態(tài))派發(fā)action
下圖將原狀態(tài) 張三和888修改為李四 和9999
瀏覽器界面
點(diǎn)擊換名稱和換ID 狀態(tài)被保存和更換
總結(jié)
以上是生活随笔為你收集整理的VueX模块化使用(超级实用)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 和秋叶一起学PPT之绘制表格(课时七)
- 下一篇: vuex刷新页面数据丢失怎么解决_你是否