1. 準備作業
1) 創建一個store，state只包含一個count成員：
new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementOfActive: ({ commit }) => {
commit('increment');
}
},
getters: {
countOfGetter: (state) => {
return state.count;
}
}
});
2) 創建一個Vue物件，并設定store
window.DEMO_VM = new Vue({
el: '#app',
store
});
2. Vuex對getter做了哪些處理
通過閱讀Vuex的原始碼，發現對getter做了下面處理
2.1 進行區域化
說明：當創建Vuex.Store時，如果內部嵌套了多個stroe(Module)，將進行區域化，目的是為了Module各自的getters都保持對各自state的訪問，
代碼：
function registerGetter(store, type, rawGetter, local) {
if (store._wrappedGetters[type]) {
if (__DEV__) {
console.error(`[vuex] duplicate getter key: ${type}`);
}
return;
}
store._wrappedGetters[type] = function wrappedGetter(store) {
return rawGetter(
local.state, // local state
local.getters, // local getters
store.state, // root state
store.getters // root getters
);
};
}
2.2 注冊為計算屬性
說明：初始化內部變數_vm，將getter注冊為_vm的計算屬性，
// 獲取getters內的每個getter封裝到_vm
const wrappedGetters = store._wrappedGetters;
const computed = {};
forEachValue(wrappedGetters, (fn, key) => {
computed[key] = partial(fn, store);
Object.defineProperty(store.getters, key, {
get: () => {
return store._vm[key];
},
enumerable: true // for local getters
});
});
store._vm = new Vue({
data: {
$$state: state
},
computed
});
3. 決議邏輯
3.1 $store.getters.countOfGetter值從哪里來
說明：雖然我們創建的countOfGetter的內部為"return state.count;"，難道我們每次呼叫countOfGetter都是執行了對應的函式嗎？
從2.2節的原始碼上看，Vuex對countOfGetter設定了get特性，每次呼叫都是從_vm.countOfGetter獲取，
所以當呼叫 window.DEMO_VM.$store.getters.countOfGetter 時 → 實際上從回傳為 window.DEMO_VM.$store._vm.countOfGetter，
這里要注意一點store.getters都被注冊為了_vm的計算屬性，
官方對計算屬性好處介紹：“計算屬性是基于它們的回應式依賴進行快取的，只在相關回應式依賴發生改變時它們才會重新求值，”
總結：這樣子也進一步說明store.getters保留了快取特性，
3.2 修改了state，getters為什么會變更
說明：跟上面的說的getters注冊為計算屬性一樣，_vm系結了state與getters對應的關系，當變更state時，對應的getter也會發生改變，
4. 問題
4.1 為何不直接在組件外修改state？
既然可以通過"window.DEMO_VM.$store.state.count = 4" 這樣操作來修改state，為什么還需要mutations、actions？
有下面幾個原因：
1) 統一規范，如果都像這樣在外部直接修改state，那么整個Vuex體系就會亂掉，直接當成了全域變數(快取)來使用了，
2) hooks：mutations、actions內部的呼叫了都附加了Subscribe的處理，
End Web開發之路系列文章 選單加載中...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/65757.html
標籤：JavaScript
上一篇：Deno 初探