VueX模块化使用(超级实用)
State
????驅動應用的數據源,用于保存所有組件的公共數據.。
Getter
????可以將 getter 理解為 store 的計算屬性, getters 的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變才會被重新計算。
Mutation
????mutations 對象中保存著更改數據的回調函數,該函數名官方規定叫 type, 第一個參數是 state, 第二參數是payload, 也就是自定義的參數。mutation 必須是同步函數。mutations 對象里的方法需要使用 store.commit 調用
Action
????Action 提交的是 mutation 而不是直接變更狀態。action 可以包含任意異步操作。actions 對象里的方法需要使用 store.dispatch 調用mutation 去實現state的修改。
????Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象,因此你可以調用 context.commit 提交一個 mutation,或者通過 context.state 和 context.getters 來獲取 state 和 getters。
????
????
模塊化文件結構
index.js
getters.js (這里把studentList過濾成2個屬性 stuName stuID)
stuentList.js
(Vuex官方推薦使用常量替代 Mutation 事件類型 圖中SET_STU_NAME)
mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler) 回調接收第一個參數是state,后面是要修改的參數
在action中提交Mutation去修改state(特別是我們需要調用 commit 很多次的時候,可以通過結構的方法)
在組件中保存數據
通過this.$store.dispatch("<action的名稱>", 要保存的狀態)派發action
下圖將原狀態 張三和888修改為李四 和9999
瀏覽器界面
點擊換名稱和換ID 狀態被保存和更換
總結
以上是生活随笔為你收集整理的VueX模块化使用(超级实用)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 和秋叶一起学PPT之绘制表格(课时七)
- 下一篇: 时间序列分析:非平稳序列的确定性分析