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

posted on 2020-06-15 00:19 FangMu 阅读(1859) 评论(0) 编辑收藏举报

搜索

随笔分类 (118)

阅读排行榜

评论排行榜

推荐排行榜

最新评论