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}`
}
}
})
