vuex 源码分析_vuex源码解读&简易实现

源码解读

开始之前，先贴个大纲：

首先，我们从使用方法入手，一步步来看

// store.js

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({

state: {

msg: ''

},

getters: {

msgPlus: state => state.msg + ' plus'

},

mutations: {

setMsg (store, data) {

store.msg = data;

}

},

actions: {

asyncChangeMsg ({commit}, data) {

setTimeout(() => {

commit('setMsg', data);

}, 2000)

}

}

})

// main.js

import Vue from 'vue';

import App from 'App.vue';

import store from './store';

new Vue({

render(h)=> h(App),

store,

}).$mount('#app')

// App.vue

msg: {{$store.state.msg}}

msgPlus: {{$store.getters.msgPlus}}

export default {

created () {

this.$store.dispatch('asyncChangeMsg', 22)

}

}

接下来

从store.js文件入手。Vue.use(Vuex): 据官网介绍，此方法用来安装插件，插件必须提供install方法，且会将Vue作为参数传入；

于是，查看导出vuex的地方，找到./node_modules/vuex/dist/vuex.esm.js，就是源码部分了。注：后缀esm(EcmaScript Module)表示es6模块版；

此文件底部，查看导出部分，确存在install方法

var index_esm = {

Store: Store,

install: install,

version: '3.1.2',

mapState: mapState,

mapMutations: mapMutations,

mapGetters: mapGetters,

mapActions: mapActions,

createNamespacedHelpers: createNamespacedHelpers

};

export default index_esm;

查看install实现，传入的参数是真正的Vue

var Vue; // bind on install

function install (_Vue) {

// 防止重复

if (Vue && _Vue === Vue) {

if (process.env.NODE_ENV !== 'production') {

console.error(

'[vuex] already installed. Vue.use(Vuex) should be called only once.'

);

}

return

}

Vue = _Vue;

applyMixin(Vue);

}

上述代码段先是防止重复调用Vue.use方法，随后调用applyMixin方法

function applyMixin (Vue) {

var version = Number(Vue.version.split('.')[0]);

if (version >= 2) {

// 在每个Vue实例的beforeCreated生命周期时，执行vuexInit方法

Vue.mixin({ beforeCreate: vuexInit });

} else {

// ...

}

}

上述代码段，根据不同vue版本分别处理，这里暂且只看2.x及以上版本。

Vue.mixin方法：据官网介绍，全局混入，影响注册后创建的每个Vue实例。此处作用是，在每个Vue实例的beforeCreated生命周期时，执行vuexInit方法。

下边看vuexInit方法做了什么？

function vuexInit () {

// this表示该Vue实例，$options是实例初始化选项

var options = this.$options;

// store injection

// 从options中取store，若存在，则赋值到this.$store上；否则，从父级取得$store进行赋值

// this.$options.parent与this.$parent等价

if (options.store) {

this.$store = typeof options.store === 'function'

? options.store()

: options.store;

} else if (options.parent && options.parent.$store) {

this.$store = options.parent.$store;

}

}

上述代码段，从main.js入口实例Vue时，初始化传入的store开始，一级级传到子组件，于是每个组件上都有了$store属性。

于是，我们可以在每个组件上，通过this.$store进行操作，例如App.js中的this.$store.state.msg/this.$store.dispatch等

了解了Vue.use(Vuex)之后，再次回到store.js文件，接下来看实例化Store对象过程中发生了什么？注意一点：

// 成员访问的优先级高于new，于是先执行Vuex.Store，而后执行实例化

new Vuex.Store({})

首先贴出Store方法的定义：

var Store = function Store (options) {

var this$1 = this;

if ( options === void 0 ) options = {};

if (!Vue && typeof window !== 'undefined' && window.Vue) {

install(window.Vue);

}

if (process.env.NODE_ENV !== 'production') {

assert(Vue, "must call Vue.use(Vuex) before creating a store instance.");

assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.");

assert(this instanceof Store, "store must be called with the new operator.");

}

var plugins = options.plugins; if ( plugins === void 0 ) plugins = [];

var strict = options.strict; if ( strict === void 0 ) strict = false;

// store internal state

this._committing = false;

this._actions = Object.create(null);

this._actionSubscribers = [];

this._mutations = Object.create(null);

this._wrappedGetters = Object.create(null);

this._modules = new ModuleCollection(options);

this._modulesNamespaceMap = Object.create(null);

this._subscribers = [];

this._watcherVM = new Vue();

this._makeLocalGettersCache = Object.create(null);

// bind commit and dispatch to self

var store = this;

var ref = this;

var dispatch = ref.dispatch;

var commit = ref.commit;

this.dispatch = function boundDispatch (type, payload) {

return dispatch.call(store, type, payload)

};

this.commit = function boundCommit (type, payload, options) {

return commit.call(store, type, payload, options)

};

// strict mode

this.strict = strict;

var state = this._modules.root.state;

// 模块相关

installModule(this, state, [], this._modules.root);

resetStoreVM(this, state);

// apply plugins

plugins.forEach(function (plugin) { return plugin(this$1); });

var useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools;

if (useDevtools) {

devtoolPlugin(this);

}

};

installModule方法为模块相关，暂且不看，先来看看比较重要的resetStoreVM方法：

function resetStoreVM (store, state, hot) {

var oldVm = store._vm;

// bind store public getters

store.getters = {};

// reset local getters cache

store._makeLocalGettersCache = Object.create(null);

// _wrappedGetters会收集所有getters方法 -- mynote

var wrappedGetters = store._wrappedGetters;

// 将getters的方法包装一层后，收集到computed对象中 -- mynote

// 使用Object.defineProperty注册store.getters，使得每次取值时，从store._vm中取。原因是下方进行new Vue传入computed后，computed的值会放到实例上边 -- mynote

var computed = {};

forEachValue(wrappedGetters, function (fn, key) {

computed[key] = partial(fn, store);

Object.defineProperty(store.getters, key, {

get: function () { return store._vm[key]; },

enumerable: true // for local getters

});

});

var silent = Vue.config.silent;

Vue.config.silent = true;

// 将state值 和 getters值分别传入一个new Vue中初始化成data和computed，使其具有响应式特性 -- mynote

store._vm = new Vue({

data: {

$$state: state

},

computed: computed

});

// ...

}

参考mynote部分，总的来说，此方法的作用是，借用Vue，使得state值和getters值具有响应式特征

再来看看，commit是如何触发mutations的？

Store.prototype.commit = function commit (_type, _payload, _options) {

var this$1 = this;

// check object-style commit

var ref = unifyObjectStyle(_type, _payload, _options);

var type = ref.type;

var payload = ref.payload;

var options = ref.options;

var mutation = { type: type, payload: payload };

var entry = this._mutations[type];

if (!entry) {

if (process.env.NODE_ENV !== 'production') {

console.error(("[vuex] unknown mutation type: " + type));

}

return

}

// 批量触发mutation

this._withCommit(function () {

entry.forEach(function commitIterator (handler) {

handler(payload);

});

});

// 通知订阅者

this._subscribers.forEach(function (sub) { return sub(mutation, this$1.state); });

if (

process.env.NODE_ENV !== 'production' &&

options && options.silent

) {

console.warn(

"[vuex] mutation type: " + type + ". Silent option has been removed. " +

'Use the filter functionality in the vue-devtools'

);

}

};

简易实现

// src下，新建vuex.js文件，之前引入vuex的地方改为引用此文件，其他地方无需修改

let Vue;

class Store {

constructor (options) {

this.vm = new Vue({

data: {state: options.state}

})

this.state = this.vm.state;

this.mutations = options.mutations;

this.actions = options.actions;

}

commit (eventName, data) {

this.mutations[eventName](this.state, data)

}

dispatch (eventName, data) {

this.actions[eventName](this, data)

}

}

const install = (_Vue) => {

Vue = _Vue;

Vue.mixin({

beforeCreate () {

if (this.$options && this.$options.store) {

this.$store = this.$options.store;

} else {

this.$store = this.$parent && this.$parent.$store;

}

}

})

}

export default {

Store,

install

}

完整项目可参考。

趁着空闲，记录下学习的知识，有待进一步完善...