Vuex源码阅读(二) store内的getters实现逻辑

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开发之路系列文章

菜单加载中...