Vuex 交流学习篇。
Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。它的核心概念有State，Getter，Mutation，Action，Module。vue
Vuex 初始化
安装
在项目中 import Vuex from 'vuex' 的时候，实际上引用的是一个对象，它的定义在/node_modules/vuex 中：node
var index = {
Store: Store,
install: install,
version: '3.1.2',
mapState: mapState,
mapMutations: mapMutations,
mapGetters: mapGetters,
mapActions: mapActions,
createNamespacedHelpers: createNamespacedHelpers
};
return index;
复制代码
Vue.use(Vuex) 实质上是启动了 vuex 的install方法 安装到vuereact
function initUse (Vue) {
Vue.use = function (plugin) {
var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
if (installedPlugins.indexOf(plugin) > -1) {
return this
}
// additional parameters
var args = toArray(arguments, 1);
args.unshift(this);
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args);
} else if (typeof plugin === 'function') {
plugin.apply(null, args);
}
installedPlugins.push(plugin);
return this
};
}
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);
}
复制代码
能够看出install 的逻辑很简单，就是把传入的 _Vue 赋值给 Vue 并执行了 applyMixin(Vue) 方法。vuex
function applyMixin (Vue) {
var version = Number(Vue.version.split('.')[0]);
if (version >= 2) {
Vue.mixin({ beforeCreate: vuexInit });
} else {
// override init and inject vuex init procedure
// for 1.x backwards compatibility.
var _init = Vue.prototype._init;
Vue.prototype._init = function (options) {
if ( options === void 0 ) options = {};
options.init = options.init
? [vuexInit].concat(options.init)
: vuexInit;
_init.call(this, options);
};
}
/**
* Vuex init hook, injected into each instances init hooks list.
*/
function vuexInit () {
var options = this.$options;
// store injection
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;
}
}
}
复制代码
从applyMixin方法中能够看出它会先判断Vue版本号，对于 Vue 2.0 以上版本，它其实就全局混入了一个 beforeCreate 钩子函数，在建立前把 options.store 保存在全部组件的 this.$store 中，这个 options.store 就是咱们在实例化 Store 对象的实例。bash
Store 实例化
其实 这里 大体 能够分为三步：数据结构
var Store = function Store (options) {
var this$1 = this;
if ( options === void 0 ) options = {};
// Auto install if it is not done yet and `window` has `Vue`.
// To allow users to avoid auto-installation in some cases,
// this code should be placed here. See #731
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;
// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
installModule(this, state, [], this._modules.root); 第二步：安装模块
// initialize the store vm, which is responsible for the reactivity
// (also registers _wrappedGetters as computed properties)
resetStoreVM(this, state); 第三部 注册 Store 实例
// apply plugins
plugins.forEach(function (plugin) { return plugin(this$1); });
var useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools;
if (useDevtools) {
devtoolPlugin(this);
}
};
复制代码
第一步：实例化模块，建立模块树
模块对于 Vuex 的意义：若是应用变得复杂时，使用单一状态树，应用的全部状态会集中到一个比较大的对象，store 对象就有可能变得至关臃肿。Vuex 为了解决这个问题容许咱们将 store 分割成模块（module）。而且每一个模块拥有本身的 state、mutation、action、getter。 但从数据结构来看，模块的设计是树形结构，本身是一个 root module 模块，下面有子模块Vuex 须要完成这颗树的构建，构建过程的入口就是：app
this._modules = new ModuleCollection(options)
复制代码
经过 debugger 能够发现 ModuleCollection 的实例化过程实则是执行了 register 方法。ide
var ModuleCollection = function ModuleCollection (rawRootModule) {
// register root module (Vuex.Store options)
this.register([], rawRootModule, false);
};
复制代码
ModuleCollection.prototype.register = function register (path, rawModule, runtime) {
var this$1 = this;
if ( runtime === void 0 ) runtime = true;
if (process.env.NODE_ENV !== 'production') {
assertRawModule(path, rawModule);
}
var newModule = new Module(rawModule, runtime);
if (path.length === 0) {
this.root = newModule;
} else {
var parent = this.get(path.slice(0, -1));
parent.addChild(path[path.length - 1], newModule);
}
// register nested modules
if (rawModule.modules) {
forEachValue(rawModule.modules, function (rawChildModule, key) {
this$1.register(path.concat(key), rawChildModule, runtime);
});
}
};
复制代码
register 方法 首先是 经过 var newModule = new Module(rawModule, runtime) 获得modules实例;函数
var Module = function Module (rawModule, runtime) {
this.runtime = runtime;
// Store some children item
this._children = Object.create(null);
// Store the origin module object which passed by programmer
this._rawModule = rawModule;
var rawState = rawModule.state;
// Store the origin module's state this.state = (typeof rawState === 'function' ? rawState() : rawState) || {}; }; 复制代码
经过Module 的构造函数 主要有 3个 属性，this._rawModule 表示模块的配置，this._children 表示它的全部子模块，this.state 表示这个模块定义的 state。学习
在 register 函数中 实例化一个 Module 后，会判断 当前 path 的长度，若是为0，它就是一个根模块，会将 newModule 实例赋值给this.root,不然就 会运行以下代码创建父子关系。
const parent = this.get(path.slice(0, -1));
parent.addChild(path[path.length - 1], newModule)
复制代码
这一步的代码 很清晰，先找到 父，而后经过父模块的addChild 创建父子模块。 再回到register 方法 它的最后一步判断若是有子模块存在 就根据 key 做为 path，递归调用register方法，这样在上一步判断 path 长度时就不会为0了。
ModuleCollection.prototype.get = function get (path) {
return path.reduce(function (module, key) {
return module.getChild(key)
}, this.root)
};
复制代码
传入的 path 是它的父模块的 path，而后从根模块开始，经过 reduce 方法一层层去找到对应的模块，查找的过程当中，执行的是 module.getChild(key) 方法：
Module.prototype.getChild = function getChild (key) {
return this._children[key]
};
复制代码
看代码一目了然，就是返回当前模块的 _children 中对应 key 的模块，每一个模块的 _children 是经过执行 parent.addChild(path[path.length - 1], newModule) 方法添加：
Module.prototype.addChild = function addChild (key, module) {
this._children[key] = module;
};
复制代码
其实 对于 子模块而言，它们的 parent 就是上一层 module，这样它们就会经过 父模块的 addChild 方法被添加到 父模块 的 _children 中。递归执行这样的过程，实例出一颗完整的模块树。
第二步：安装模块
实例化完模块后, debugger回到 Store 函数中。
var state = this._modules.root.state;
installModule(this, state, [], this._modules.root);
复制代码
installModule 函数以下：
function installModule (store, rootState, path, module, hot) {
var isRoot = !path.length;
var namespace = store._modules.getNamespace(path);
// register in namespace map
if (module.namespaced) {
if (store._modulesNamespaceMap[namespace] && process.env.NODE_ENV !== 'production') {
console.error(("[vuex] duplicate namespace " + namespace + " for the namespaced module " + (path.join('/'))));
}
store._modulesNamespaceMap[namespace] = module;
}
// set state
if (!isRoot && !hot) {
var parentState = getNestedState(rootState, path.slice(0, -1));
var moduleName = path[path.length - 1];
store._withCommit(function () {
if (process.env.NODE_ENV !== 'production') {
if (moduleName in parentState) {
console.warn(
("[vuex] state field \"" + moduleName + "\" was overridden by a module with the same name at \"" + (path.join('.')) + "\"")
);
}
}
Vue.set(parentState, moduleName, module.state);
});
}
var local = module.context = makeLocalContext(store, namespace, path);
module.forEachMutation(function (mutation, key) {
var namespacedType = namespace + key;
registerMutation(store, namespacedType, mutation, local);
});
module.forEachAction(function (action, key) {
var type = action.root ? key : namespace + key;
var handler = action.handler || action;
registerAction(store, type, handler, local);
});
module.forEachGetter(function (getter, key) {
var namespacedType = namespace + key;
registerGetter(store, namespacedType, getter, local);
});
module.forEachChild(function (child, key) {
installModule(store, rootState, path.concat(key), child, hot);
});
}
复制代码
installModule 函数方法有 5 个入参，store 表示 root store；state 表示 root state；path 表示模块的访问路径；module 表示当前的模块，hot 表示是不是热更新。
默认状况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块可以对同一 mutation 或 action 做出响应。
若是但愿你的模块具备更高的封装度和复用性，你能够经过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的全部 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit。换言之，你在使用模块内容（module assets）时不须要在同一模块内额外添加空间名前缀。更改 namespaced 属性后不须要修改模块内的代码。 获取命名空间的方法以下：
const namespace = store._modules.getNamespace(path)
复制代码
方法的具体实现：
ModuleCollection.prototype.getNamespace = function getNamespace (path) {
var module = this.root;
return path.reduce(function (namespace, key) {
module = module.getChild(key);
return namespace + (module.namespaced ? key + '/' : '')
}, '')
};
复制代码
namespaced 为 true 且 没有冲突的状况下会将 namespace 对应的模块保存下来 :
store._modulesNamespaceMap[namespace] = module;
复制代码
接下来 会 判断 是否 是root 而后执行 如下方法 拿到 state，而后经过Vue.set 一层层 初始化 state。
function getNestedState (state, path) {
return path.length
? path.reduce(function (state, key) { return state[key]; }, state)
: state
}
复制代码
接下来会执行 makeLocalContext 方法：
function makeLocalContext (store, namespace, path) {
var noNamespace = namespace === '';
var local = {
dispatch: noNamespace ? store.dispatch : function (_type, _payload, _options) {
var args = unifyObjectStyle(_type, _payload, _options);
var payload = args.payload;
var options = args.options;
var type = args.type;
if (!options || !options.root) {
type = namespace + type;
if (process.env.NODE_ENV !== 'production' && !store._actions[type]) {
console.error(("[vuex] unknown local action type: " + (args.type) + ", global type: " + type));
return
}
}
return store.dispatch(type, payload)
},
commit: noNamespace ? store.commit : function (_type, _payload, _options) {
var args = unifyObjectStyle(_type, _payload, _options);
var payload = args.payload;
var options = args.options;
var type = args.type;
if (!options || !options.root) {
type = namespace + type;
if (process.env.NODE_ENV !== 'production' && !store._mutations[type]) {
console.error(("[vuex] unknown local mutation type: " + (args.type) + ", global type: " + type));
return
}
}
store.commit(type, payload, options);
}
};
// getters and state object must be gotten lazily
// because they will be changed by vm update
Object.defineProperties(local, {
getters: {
get: noNamespace
? function () { return store.getters; }
: function () { return makeLocalGetters(store, namespace); }
},
state: {
get: function () { return getNestedState(store.state, path); }
}
});
return local
}
复制代码
makeLocalContext 有 3 个入参，store 表示 root store；namespace 表示模块的命名空间，path 表示模块的 path。该方法定义了 local 对象，对于 dispatch 和 commit 方法，若是没有 namespace，它们就直接指向了 root store 的 dispatch 和 commit 方法，不然会建立方法，把 type 自动拼接上 namespace，而后执行 store 上对应的方法。
debugger 回到 installModule ，这里接下来就是 分别完成 Mutation，Action，Getter 的注册。
function registerMutation (store, type, handler, local) {
var entry = store._mutations[type] || (store._mutations[type] = []);
entry.push(function wrappedMutationHandler (payload) {
handler.call(store, local.state, payload);
});
}
function registerAction (store, type, handler, local) {
var entry = store._actions[type] || (store._actions[type] = []);
entry.push(function wrappedActionHandler (payload) {
var res = handler.call(store, {
dispatch: local.dispatch,
commit: local.commit,
getters: local.getters,
state: local.state,
rootGetters: store.getters,
rootState: store.state
}, payload);
if (!isPromise(res)) {
res = Promise.resolve(res);
}
if (store._devtoolHook) {
return res.catch(function (err) {
store._devtoolHook.emit('vuex:error', err);
throw err
})
} else {
return res
}
});
}
function registerGetter (store, type, rawGetter, local) {
if (store._wrappedGetters[type]) {
if (process.env.NODE_ENV !== 'production') {
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
)
};
}
复制代码
installModule 方法会完成模块下的 state、mutations、actions、getters、 的初始化工做，而且经过递归遍历的方式，就完成了全部子模块的安装工做。
第三步 注册 Store 实例
安装完模块后, debugger回到 Store 函数中。
resetStoreVM(this, state);
复制代码
下面是方法定义：
function resetStoreVM (store, state, hot) {
var oldVm = store._vm;
// bind store public getters
store.getters = {};
// reset local getters cache
store._makeLocalGettersCache = Object.create(null);
var wrappedGetters = store._wrappedGetters;
var computed = {};
forEachValue(wrappedGetters, function (fn, key) {
// use computed to leverage its lazy-caching mechanism
// direct inline function use will lead to closure preserving oldVm.
// using partial to return function with only arguments preserved in closure environment.
computed[key] = partial(fn, store);
Object.defineProperty(store.getters, key, {
get: function () { return store._vm[key]; },
enumerable: true // for local getters
});
});
// use a Vue instance to store the state tree
// suppress warnings just in case the user has added
// some funky global mixins
var silent = Vue.config.silent;
Vue.config.silent = true;
store._vm = new Vue({
data: {
$$state: state
},
computed: computed
});
Vue.config.silent = silent;
// enable strict mode for new vm
if (store.strict) {
enableStrictMode(store);
}
if (oldVm) {
if (hot) {
// dispatch changes in all subscribed watchers
// to force getter re-evaluation for hot reloading.
store._withCommit(function () {
oldVm._data.$$state = null;
});
}
Vue.nextTick(function () { return oldVm.$destroy(); });
}
}
复制代码
resetStoreVM 首先遍历了 _wrappedGetters 得到每一个 getter 的函数 fn 和 key，而后定义了 computed[key] = () => fn(store)。这里的_wrappedGetters 方法就定义在 安装模块 registerGetter 方法中。fn(store) 等于以下方法：
store._wrappedGetters[type] = function wrappedGetter (store) {
return rawGetter(
local.state, // local state
local.getters, // local getters
store.state, // root state
store.getters // root getters
)
}
复制代码
实则 咱们 访问 store.getters 是访问了store 实例 上的 get方法。
computed[key] = partial(fn, store);
Object.defineProperty(store.getters, key, {
get: function () { return store._vm[key]; },
enumerable: true // for local getters
});
复制代码
根据 key 访问 store.getters 的某一个 getter 的时候，实际上就是访问了 store._vm[key]，也就是 computed[key]，在执行 computed[key] 对应的函数的时候，会执行 rawGetter 方法，那么就会访问到 store.state，进而访问到 store._vm._data.$$state，这样就创建了一个依赖关系。当 store.state 发生变化的时候，下一次再访问 store.getters 的时候会从新计算，这里的 store._vm 建立过程在代码中也清晰可见。
当严格模式下，store._vm 会添加一个 wathcer 来观测 this._data.$$state 的变化，也就是当 store.state 被修改的时候, store._committing 必须为 true，不然在开发阶段会报警告。
function enableStrictMode (store) {
store._vm.$watch(function () { return this._data.$$state }, function () {
if (process.env.NODE_ENV !== 'production') {
assert(store._committing, "do not mutate vuex store state outside mutation handlers.");
}
}, { deep: true, sync: true });
}
复制代码
从 debugger 能够看到，在 Commit 过程当中会执行 _withCommit 函数， 其实也就是 在 fn 以前 将_committing 变量 改成true。
Store.prototype._withCommit = function _withCommit (fn) {
var committing = this._committing;
this._committing = true;
fn();
this._committing = committing;
};
复制代码
发布一篇以前在 vuex 方面的自我学习文章，欢迎交流学习。
- 1. Vuex对比Redux学习Vuex
- 2. [Vuex]Vuex学习手记
- 3. vuex学习---mutation
- 4. 学习vuex
- 5. Vuex学习
- 6. vuex学习---getter
- 7. VueX学习
- 8. vuex学习---action
- 9. vuex学习
- 10. vuex的学习
- 更多相关文章...
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Vuex对比Redux学习Vuex
- 2. [Vuex]Vuex学习手记
- 3. vuex学习---mutation
- 4. 学习vuex
- 5. Vuex学习
- 6. vuex学习---getter
- 7. VueX学习
- 8. vuex学习---action
- 9. vuex学习
- 10. vuex的学习