关于vue.js:面试官如何自己手写一个mini的vuex3

63次阅读

共计 9574 个字符，预计需要花费 24 分钟才能阅读完成。

介绍

说来惭愧，这对于喜爱摸鱼的程序员来说，vue3 都公布这么久了，当初才开始浏览 vuex3 源码，当初分享一下集体对这次学习的总结，写的不好请大家轻喷。

地址

源码地址:vuejs/vuex@3.6.2

myGithub:2460392754/mini-vuex3

我的项目构造

src
├── core
│   ├── helpers.ts
│   ├── index.ts
│   └── store.ts
├── types
│   └── index.ts
├── utils
│   ├── index.ts
│   ├── isModuleType.ts
│   ├── reactive.ts
│   └── register.ts
└── index.ts

实现

1 根本

1.1 注册

应用 class 的static属性进行创立一个名为 install 的静态方法, 用于 Vue.use 注册插件。

插件注册时把以后环境的 vue 对象援用保留下来，确保我的项目和插件应用的是同一个援用对象。因为须要利用我的项目中的 data 性能来辅助 state 和getters值更新后触发视图更新。

github: mini-vuex3/src/core/store.ts#L6-L23

import type {VueConstructor} from 'vue';
 
// 保留以后 vue 援用, 确保和我的项目应用雷同的援用
let _vue: VueConstructor;
 
export class store {
    /**
     * 插件注册
     * @param vue
     */
    static install(vue: VueConstructor) {_vue = vue;}
 
    // do something...
}

1.2 实例化

通过 class 的构造函数进行初始化。

(Tips: registerState和 registerGetters 会在前面的实例属性里讲到)

github: mini-vuex3/src/core/store.ts#L40-L59

import type Vue from 'vue';
import type {StoreOpts} from '../types';
 
// 保留以后 vue 援用, 确保和我的项目应用雷同的援用
let _vue: VueConstructor;
 
export class store {
    private _vm: Vue = null;
    private _mutations = null;
    private _actions = null;
    private _modules = null;
 
    getters = null;
 
    constructor(opts: StoreOpts) {
        // 增加 原型属性，指向以后 store 实例化后的对象
        _vue.prototype.$store = this;
 
        // _state 对象 响应式解决, 须要告诉我的项目视图更新
        this._vm = new _vue({data() {
                return {_state: registerState(opts),
                };
            },
        });
 
        this.getters = registerGetters(this.state, opts || {});
        this._mutations = opts.mutations || {};
        this._actions = opts.actions || {};
        this._modules = opts.modules || {};
 
        registerModules(this._mutations, this._actions, this._modules);
    }
}

registerModules

应用 es6 中 Reflect 个性进行批改对象的键名模仿公有对象, 例如: {A: 'a'} => {_A: 'a'}。

把规范化后 moduels.[NAME].mutations 和moduels.[NAME].actions对象进行合并。

github: mini-vuex3/src/utils/register.ts#L57-L84

/**
 * 注册 modules
 */
export function registerModules(mutations: Mutations, actions: Actions, modules: Modules) {Object.keys(modules).forEach((key) => {const module = modules[key] as Module & {
            _actions: Actions;
            _mutations: Mutations;
        };
 
        // 批改键名
        Reflect.set(module, '_actions', module.actions);
        Reflect.set(module, '_mutations', module.mutations);
        Reflect.deleteProperty(module, 'actions');
        Reflect.deleteProperty(module, 'mutations');
 
        let moduleActions = module._actions;
        let moduleMutations = module._mutations;
 
        if (module.namespaced === true) {moduleMutations = setModuleNameDataKey(module.name, moduleMutations);
            moduleActions = setModuleNameDataKey(module.name, moduleActions);
        }
 
        Object.assign(mutations, moduleMutations);
        Object.assign(actions, moduleActions);
    });
}
 
/**
 * 批改 modules 中对象的键名, 应用 module.name 追加拼接
 * @param moduleName
 * @param data
 * @returns
 */
function setModuleNameDataKey(moduleName: string, data: { [key: string]: Function }) {const res = {};
 
    Object.keys(data).forEach((key) => {
        const newKey = moduleName + '/' + key;
 
        res[newKey] = data[key];
    });
 
    return res;
}

2 实例属性

2.1 state 属性

github: mini-vuex3/src/core/store.ts#L28-L51

export class store {
    /**
     * 设置 state 的 get 拜访器
     */
    get state(): State {return this._vm.$data._state;}
 
    /**
     * 设置 state 的 set 拜访器
     * 禁止间接写入数据
     */
    set state(v: any) {throw new Error("can't set state: " + v);
    }
 
    constructor(opts: StoreOpts) {
        // _state 对象 响应式解决, 须要告诉我的项目视图更新
        this._vm = new _vue({data() {
                return {_state: registerState(opts),
                };
            },
        });
 
        // do something...
    }
 
    // do something...
}

registerState

把 module.[NAME].state 合并到 state 中

github: mini-vuex3/src/utils/register.ts#L22-L35

/**
 * 注册 state
 * @param opts
 * @returns
 */
export function registerState(opts: StoreOpts) {const moduleStates = {};
 
    Object.values(opts.modules || {}).forEach((module) => {moduleStates[module.name] = module.state || {};});
 
    return Object.assign(moduleStates, opts.state || {});
}

2.2 getters 属性

github: mini-vuex3/src/core/store.ts#L53

export class store {constructor(opts: StoreOpts) {this.getters = registerGetters(this.state, opts || {});
 
        // do something...
    }
 
    // do something...
}

registerGetters

把 module.[NAME].getters 合并到 getters 中, 并通过 Object.defineProperty 劫持 getters 中所有对象，转换成响应式类型。

github: mini-vuex3/src/utils/register.ts#L37-L55

/**
 * 注册 getters
 */
export function registerGetters(state: State, opts: StoreOpts) {const getters: any = {};
 
    reactiveGetters(opts.getters, state, getters);
 
    Object.values(opts.modules || {}).forEach((module) => {if (module.namespaced === true) {const newGetters = setModuleNameDataKey(module.name, module.getters);
            reactiveGetters(newGetters, state[module.name], getters);
        } else {reactiveGetters(module.getters, state[module.name], getters);
        }
    });
 
    return getters;
}
 
/**
 * 劫持 getters 对象，解决成响应式内容
 * @param getters
 * @param state
 * @param res
 */
export function reactiveGetters(getters: Getters, state: State, res: { [key: string]: string }) {for (let key in getters) {
        Object.defineProperty(res, key, {get: () => {return getters[key](state);
            },
 
            set(key) {console.error(`Cannot set getters ${key}`);
            },
        });
    }
}

3 实例办法

3.1 commit 办法

拜访 namespaced 为true的 modules 对象时, 批改 state 对象范畴。

github: mini-vuex3/src/core/store.ts#L61-L85

export class store {
    // do something...
 
    commit(type: string, payload: Payload) {const func: Mutation = this._mutations[type];
        let state: State;
 
        // 未定义属性
        if (typeof func === 'undefined') {throw new Error(`unknown mutation type: ${type}`);
        }
 
        if (isModuleType(type)) {const name = type.split('/')[0];
            const module = this._modules[name];
 
            state = module.state;
        } else {state = this.state;}
 
        func.call(this, state, payload);
    }
}

3.2 dispatch 办法

拜访 namespaced 为true的 modules 对象时, 批改函数内 this 的commit和 dispatch 作用域范畴和对应的 store 内容。

github: mini-vuex3/src/core/store.ts#L87-L116

export class store {
    // do something...
 
    dispatch(type: string, payload: Payload) {const func: Action = this._actions[type];
        let store: any;
 
        // 未定义属性
        if (typeof func === 'undefined') {throw new Error(`unknown action type: ${type}`);
        }
 
        if (isModuleType(type)) {const name = type.split('/')[0];
            const module = this._modules[name];
 
            store = module;
            // 批改作用域范畴
            Object.assign(store, {commit: this.commit.bind(store),
                dispatch: this.dispatch.bind(store),
            });
        } else {store = this;}
 
        func.call(this, store, payload);
    }
}

4 辅助函数

4.1 mapState 办法

github: mini-vuex3/src/core/helpers.ts#L52-L92

/**
 * 辅助工具 mapState
 * @returns
 */
export function mapState() {const { moduleName, opts} = normalizeNamespace(arguments[0], arguments[1]);
    const resFunc = {};
 
    // 数组内容，例如：mapState(['x1', 'x2']) 或 mapState('xxxModule', ['xxx1', 'xxx2'])
    if (Array.isArray(opts)) {opts.forEach((stateKey) => {resFunc[stateKey] = function () {return handleModuleType.call(this, moduleName, 'state')[stateKey];
            };
        });
    }
 
    // 解决对象构造
    else {for (const [newStateKey, val] of Object.entries<string | Function>(opts)) {// mapState({ xxFunc: (state) => state.xx1 }) 或  mapState({xxFunc(state){return state.xx1 + this.xxx1} })
            if (typeof val === 'function') {resFunc[newStateKey] = function () {const state = handleModuleType.call(this, moduleName, 'state');
 
                    // 批改 this 指向，解决 回调函数中应用以后 vm 实例中的 data 或 computed 变量
                    return val.call(this, state);
                };
            }
 
            // mapState({xxxxxxx1: 'x1'}) 或 mapState('xxxModule', { xxxxxxx1: 'x1'})
            else {resFunc[newStateKey] = function () {return handleModuleType.call(this, moduleName, 'state')[val];
                };
            }
        }
    }
 
    return resFunc;
}
 
/**
 * 格式化 参数（命名空间和数据）* @param namespace
 * @param map
 * @returns
 */
function normalizeNamespace(moduleName: string, opts: any) {
    // 未定义 moduleName
    if (typeof moduleName !== 'string') {
        return {
            moduleName: null,
            opts: moduleName,
        };
    }
 
    return {
        moduleName,
        opts,
    };
}
 
/**
 * 解决命名空间（module 类型）* @param moduleName
 */
function handleModuleType(moduleName: string | null, type: string, key: string | undefined) {if (type === 'state') {return moduleName === null ? this.$store[type] : this.$store[type][moduleName];
    }
 
    if (key === undefined) {return this.$store[type];
    }
 
    let newKey = key;
 
    if (moduleName !== null) {newKey = moduleName + '/' + key;}
 
    return this.$store[type][newKey];
}

4.2 mapGetters 办法

github: mini-vuex3/src/core/helpers.ts#L94-L119

/**
 * 辅助工具 mapGetters
 * @returns
 */
export function mapGetters() {const { moduleName, opts} = normalizeNamespace(arguments[0], arguments[1]);
    const resFunc = {};
 
    // 数组内容，例如：mapGetters(['x1', 'x2']) 或 mapGetters('xxxModule', ['xxx1', 'xxx2'])
    if (Array.isArray(opts)) {opts.forEach((getterKey) => {resFunc[getterKey] = function () {return handleModuleType.call(this, moduleName, 'getters', getterKey);
            };
        });
    } else {// mapGetters({ xxxxxxx1: 'x1'}) 或 mapGetters('xxxModule', { xxxxxxx1: 'x1'})
        for (const [newGetterKey, oldGetterKey] of Object.entries<string>(opts)) {resFunc[newGetterKey] = function () {return handleModuleType.call(this, moduleName, 'getters', oldGetterKey);
            };
        }
    }
 
    return resFunc;
}

4.3 mapMutations 办法

github: mini-vuex3/src/core/helpers.ts#L121-L152

/**
 * 辅助工具 mapMutations
 * @returns
 */
export function mapMutations() {const { moduleName, opts} = normalizeNamespace(arguments[0], arguments[1]);
    const resFunc = {};
 
    // 数组内容，例如：mapMutations(['x1', 'x2']) 或 mapMutations('xxxModule', ['xxx1', 'xxx2'])
    if (Array.isArray(opts)) {opts.forEach((getterKey) => {resFunc[getterKey] = function (payload) {const func = handleModuleType.call(this, moduleName, '_mutations', getterKey);
                const state = handleModuleType.call(this, moduleName, 'state');
 
                return func(state, payload);
            };
        });
    } else {for (const [newGetterKey, oldGetterKey] of Object.entries<string>(opts)) {// mapMutations({ xxxxxxx1: 'x1'}) 或 mapMutations('xxxModule', { xxxxxxx1: 'x1'})
            resFunc[newGetterKey] = function (payload) {const func = handleModuleType.call(this, moduleName, '_mutations', oldGetterKey);
                const state = handleModuleType.call(this, moduleName, 'state');
 
                return func(state, payload);
            };
        }
    }
 
    return resFunc;
}

4.4 mapActions 办法

github: mini-vuex3/src/core/helpers.ts#L154-L200

/**
 * 辅助工具 mapActions
 * @returns
 */
export function mapActions() {const { moduleName, opts} = normalizeNamespace(arguments[0], arguments[1]);
    const resFunc = {};
 
    // 数组内容，例如：mapActions(['x1', 'x2']) 或 mapActions('xxxModule', ['xxx1', 'xxx2'])
    if (Array.isArray(opts)) {opts.forEach((getterKey) => {resFunc[getterKey] = function (payload) {const func = handleModuleType.call(this, moduleName, '_actions', getterKey);
                let store = handleModuleStore.call(this, moduleName);
 
                store = Object.assign({ ...store},
                    {commit: this.$store.commit.bind(store),
                        dispatch: this.$store.dispatch.bind(store),
                    }
                );
 
                return func(store, payload);
            };
        });
    } else {for (const [newGetterKey, oldGetterKey] of Object.entries<string>(opts)) {// mapActions({ xxxxxxx1: 'x1'}) 或 mapActions('xxxModule', { xxxxxxx1: 'x1'})
            resFunc[newGetterKey] = function (payload) {let store = handleModuleStore.call(this, moduleName, '_actions', oldGetterKey);
 
                store = Object.assign({ ...store},
                    {commit: this.$store.commit.bind(store),
                        dispatch: this.$store.dispatch.bind(store),
                    }
                );
 
                console.log(store);
 
                return store['_actions'][oldGetterKey](store, payload);
            };
        }
    }
 
    return resFunc;
}

最初

手写一个 mini-vuex3 相对来说还是比拟容易的，还是须要多看、多学、多写。

# 地址

正文完
vue.js
发表至： vue.js
2022-05-10
 0
关于vue.js:Vue实现原理图文讲解
关于vue.js:关于配置项重复的问题
关于vue.js:阿里iconfont在vuereact中引用及使用
关于vue.js:组件库Mint-UI上拉加载更多插件Loadmore的使用tips