vuex 狀態管理
-
簡介:
- Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候,若 store 中的狀態發生變化,那么相應的組件也會相應地得到高效更新。
- 不能直接改變 store 中的狀態:改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。而非直接修改 state,因為這可以更明確地追蹤到狀態的變化。
state:
1. 狀態管理,定義狀態管理屬性。強烈建議不要直接修改 state 的屬性,這會導致難以監管,從面相對象來說,這破壞了封裝性
2. Vuex.Store 本質是實現的一個單例,web 的門檻低可能這是一個原因,監管一個簡單的對象變更很繁瑣,雖然有對象,卻沒有面向對象的思想(setter/getter)mutation:
1. Vuex 中的 mutation 非常類似于事件:每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler);mutation 一個重要的原則就是 mutation 必須是同步函數。
2. 可以向 store.commit 傳入額外的參數,即 mutation 的 載荷(payload)。在大多數情況下,載荷應該是一個對象,這樣可以包含多個字段并且記錄的 mutation 會更易讀。
3. 對象風格提交:將 mutation 的名稱包裹在對象的 type 屬性上,此時,整個對象都作為載荷傳給 mutation 函數,因此 handler 保持不變:實現沒有改變,調用方式改變。action:
1. Action 提交的是 mutation,而不是直接變更狀態。Action 可以包含任意異步操作,批量處理 mutation,還可以返回一個 promise,Action 通過 store.dispatch 方法觸發
2. 因為 mutation 都是同步事務, 更建議使用異步的 actions 來處理 commit 操作,對 mutation 進行封裝。和 mutation 一樣,Actions 支持同樣的載荷方式和對象方式進行分發getters:
1. 對 state 的 computed,從 store 中的 state 中派生出一些狀態,如 computed,getter 的返回值會根據它的依賴被緩存起來。Getter 也可以接受其他 getter 作為第二個參數。
2. 也可以通過讓 getter 返回一個函數,來實現給 getter 傳參。這對 store 里的數組進行查詢時非常有用。注意,getter 在通過方法訪問時,每次都會去進行調用,而不會緩存結果。map 映射:
1. 將 store 內定義的 state,getters,actions,映射到當前組件下,需要從 vuex 導入 mapState,mapGetters,mapActions。導入對象可為字典或集合:字典可重命名屬性名稱。
2. 這將不再需要頻繁的訪問store.getters 進行 getter 訪問。
5. mapAction:通過 ...mapActions 在 methods 內映射 store 的 actions,映射完成可直接進行調用,避開了顯式地訪問 $store 來調用 commit 或 dispatch,更建議使用 actions。配置:
1. 依賴:npm install vuex --save
2. 集中在 store 內配置好,導出 store 對象,和路由處理類似,這樣在 main.js 內注入時直接導入即可
3. import 導入模塊,如路由,組件,狀態。若文件夾子下存在 index 文件,默認會識別并導入,且在導入文件的時候,編譯會主動識別文件類型,即導入還可省略文件后綴。strict
1. 在嚴格模式下,無論何時發生了狀態變更且不是由 mutation 函數引起的,將會拋出錯誤。這能保證所有的狀態變更都能被調試工具跟蹤到。
2. 注意:不要在發布環境下啟用嚴格模式!嚴格模式會深度監測狀態樹來檢測不合規的狀態變更——請確保在發布環境下關閉嚴格模式,以避免性能損失。
3. 當在嚴格模式中使用 Vuex 時,在屬于 Vuex 的 state 上使用 v-model 會比較棘手:處理起來較為繁瑣:建議可不使用 strict,使用注意需要直接修改 state 就行。
在使用markdown書寫博客時,有可能會出現文本中的字符是markdown語法,那么markdown翻譯器就會誤將這些符號也翻譯成某種功能,就會出現顯示錯誤的情況。此時需要使用反斜杠('')來將這些字符進行轉義。如文中的 $
sample
export default new Vuex.Store({
strict: process.env.NODE_ENV == "production" ? false : true,
state: {
count: 0,
payload: 'Payload',
},
mutations: {
increment(state) {
state.count++;
console.log(state.count);
},
decrement(state) {
state.count--;
console.log(state.count);
},
commit_payload(state, obj) {
state.payload = obj.payload;
}
},
actions: {
action_increment(context) {
context.commit('increment');
},
// 參數解構
action_decrement({
commit
}) {
commit('increment');
},
action_payload({
commit
}, obj) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('commit_payload', obj)
resolve()
}, 1000)
})
}
},
getters: {
count_info(state) {
return `count plus ${state.count + 1}`
}
}
})