vuex原理解析
站长
· 阅读数 58
结论
执行Vue.use时会执行vuex的install方法，会往全局混入一个全局的mixin，只有一个属性beforeCreate，它的作用是让每个组件可以访问到this.$store属性。
执行new Vuex.Store时会将传入的配置进行格式化处理，会递归的注册每个module的state、getters、mutation、actions属性，将每个module的getter、action、mutations放入一个对象里，对应的key前面会加上模块名，而state会放入一个有上下级关系的对象里。
内部会重写commit和dispatch，再当前模块触发状态变更时会自动在要触发的commit和dispatch前面加上模块名。 最后会提供一些map开头的语法糖使用。
Vuex 和单纯的全局对象有以下两点不同
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。(也就是所谓的MVVM)
- Vuex采用MVC模式中的Model层，规定所有的数据必须通过action--->mutaion--->state这个流程进行来改变状态的。改变 store 中的状态的唯一途径就是显式地提交 (commit)
mutations。如果是异步的，就派发(dispatch)actions，其本质还是提交mutations
vuex的store是如何注入到组件中的？
依赖 Vue.mixin 这个 API，简而言之就是vuex等插件在实例化时会利用传递进来的 Vue 构造函数的 mixin 方法向 beforeCreate 钩子注入一些向 Vue.prototype 挂载插件实例的代码
安装插件
Vue.use(Vuex); // vue的插件机制,安装vuex插件
install时的源码
//混入
Vue.mixin({
beforeCreate() { //表示在组件创建之前自动调用，每个组件都有这个钩子
// console.log(this.$options.name) //this表示每个组件,测试，可以打印出mian.js和App.vue中的name main和app
//保证每一个组件都能得到仓库
//判断如果是main.js的话，就把$store挂到上面，这里能用this.$options.store判断根组件是因为在main.js里创建vue实例时指定 store 属性来注入状态管理实例
if(this.$options && this.$options.store){
this.$store = this.$options.store
}else{
//如果不是根组件的话，也把$store挂到上面,因为是树状组件，所以用这种方式
this.$store = this.$parent && this.$parent.$store
//在App.vue上的mounted({console.log(this.$store)})钩子中测试，可以得到store ---> Store {}
}
},
})
store注入 vue的实例组件的方式，是通过vue的 mixin机制，借助vue组件的生命周期 钩子 beforeCreate 完成的。即 每个vue组件实例化过程中，会在 beforeCreate 钩子前调用 vuexInit 方法。
实现state响应式
由于 _vm._data.$$state 已经被 Vue 响应式处理，所以任何对它的修改都会触发相应的视图更新。
store._vm = new Vue({
data: {
$$state: state
},
computed: computed
});
getters实现
vuex的getters借助vue的计算属性computed实现数据实时监听。
function makeLocalGetters (store, namespace) {
var gettersProxy = {};
var splitPos = namespace.length;
Object.keys(store.getters).forEach(function (type) {
// skip if the target getter is not match this namespace
if (type.slice(0, splitPos) !== namespace) { return }
// extract local getter type
var localType = type.slice(splitPos);
// Add a port to the getters proxy.
// Define as getter property because
// we do not want to evaluate the getters in this time.
Object.defineProperty(gettersProxy, localType, {
// 当你要获取getterName（myAge）会自动调用get方法
get: function () { return store.getters[type]; },
enumerable: true
});
});
return gettersProxy
}
Mutation 初始化
// 通过module的循环，拿到key，然后组装成namespacedType，对于上面的例子
Module.prototype.forEachMutation = function forEachMutation (fn) {
if (this._rawModule.mutations) {
forEachValue(this._rawModule.mutations, fn);
}
};
// 给store._mutations数组中添加了一个wrappedMutationHandler方法，最终会执行传入的mutation
module.forEachMutation(function (mutation, key) {
var namespacedType = namespace + key;
registerMutation(store, namespacedType, mutation, local);
});
// 注册方法
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);
});
}
在注册方法里最后会被组合成我们平时使用的方式
store = {
_mutations: {
'a/increment': [ƒ]
}
}
Action 初始化
循环组装的过程中与和mutation是类似的，不过因为action是支持异步的，所以在注册上有所不同
function registerAction (store, type, handler, local) {
const entry = store._actions[type] || (store._actions[type] = [])
entry.push(function wrappedActionHandler (payload) {
let 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)
}
return res
})
}
可以看出多了一些入参，并且结果用结果用Promsie.resolve进行包裹，最终获得
store = {
_actions: {
'a/increment': [ƒ]
}
}
commit的实现
commit(type,payload){
this.mutations[type](payload)
}
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) {
{
console.error(("[vuex] unknown mutation type: " + type));
}
return
}
this._withCommit(function () {
// 遍历 entry 数组中的每个处理函数 handler，并传递 payload 作为参数调用它们。
entry.forEach(function commitIterator (handler) {
handler(payload);
});
});
// 遍历 _subscribers 数组中的每个订阅者函数 sub，并传递 mutation 和当前状态 this$1.state 作为参数调用它们。这个过程主要用于通知订阅者有新的 mutation 发生。
// 可以使用 store.subscribe() 订阅 Vuex mutation
this._subscribers
.slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe
.forEach(function (sub) { return sub(mutation, this$1.state); });
if (
options && options.silent
) {
console.warn(
"[vuex] mutation type: " + type + ". Silent option has been removed. " +
'Use the filter functionality in the vue-devtools'
);
}
};
dispatch的实现
Store.prototype.dispatch = function dispatch (_type, _payload) {
var this$1 = this;
// check object-style dispatch
var ref = unifyObjectStyle(_type, _payload);
var type = ref.type;
var payload = ref.payload;
var action = { type: type, payload: payload };
var entry = this._actions[type];
if (!entry) {
{
console.error(("[vuex] unknown action type: " + type));
}
return
}
// 代码会执行一系列的订阅处理。通过遍历 _actionSubscribers 数组，依次执行 before、after 和 error 类型的订阅回调函数。其中，before 在执行 action 前被调用，after 在执行 action 后被调用，error 在执行 action 出错时被调用。
try {
this._actionSubscribers
.slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe
.filter(function (sub) { return sub.before; })
.forEach(function (sub) { return sub.before(action, this$1.state); });
} catch (e) {
{
console.warn("[vuex] error in before action subscribers: ");
console.error(e);
}
}
// 根据 entry 数组的长度决定如何执行 action。如果 entry 数组长度大于 1，则使用 Promise.all 并发执行所有的 action 处理函数，返回一个 Promise 对象。如果 entry 数组长度为 1，则直接执行该 action 处理函数，并返回执行结果。
var result = entry.length > 1
? Promise.all(entry.map(function (handler) { return handler(payload); }))
: entry[0](payload);
// 最后，将结果封装在一个新的 Promise 对象中，并在 then 和 catch 中执行相应的订阅回调函数，包括 after 和 error 类型的订阅回调函数。
return new Promise(function (resolve, reject) {
result.then(function (res) {
try {
this$1._actionSubscribers
.filter(function (sub) { return sub.after; })
.forEach(function (sub) { return sub.after(action, this$1.state); });
} catch (e) {
{
console.warn("[vuex] error in after action subscribers: ");
console.error(e);
}
}
resolve(res);
}, function (error) {
try {
this$1._actionSubscribers
.filter(function (sub) { return sub.error; })
.forEach(function (sub) { return sub.error(action, this$1.state, error); });
} catch (e) {
{
console.warn("[vuex] error in error action subscribers: ");
console.error(e);
}
}
reject(error);
});
})
};
vuex辅助函数
normalizeNamespace函数获取当前传入的参数中是否具有namespace字段，返回一个规范化后的命名空间字符串，供后续的代码使用
- 如果命名空间为
null、undefined或空字符串，将其转换为''（空字符串）表示默认命名空间。 - 如果命名空间是一个数组，将其转换为用
'/连接的字符串形式，例如['moduleA', 'moduleB']转换为'moduleA/moduleB'。 - 如果命名空间是一个字符串，直接返回该字符串。
normalizeMap就是把对象和数组两种形式都转换成对象的key value
normalizeMap([1, 2, 3]) => [ { key: 1, val: 1 }, { key: 2, val: 2 }, { key: 3, val: 3 } ]
normalizeMap({a: 1, b: 2, c: 3}) => [ { key: 'a', val: 1 }, { key: 'b', val: 2 }, { key: 'c', val: 3 } ]
mapState
// normalizeNamespace返回一个
var mapState = normalizeNamespace(function (namespace, states) {
var res = {};
// 是否为有效的映射参数。如果不是有效的映射参数，则在控制台输出错误信息。
if ( !isValidMap(states)) {
console.error('[vuex] mapState: mapper parameter must be either an Array or an Object');
}
// 通过 normalizeMap 函数对 states 进行规范化处理，将其转换为标准的映射对象数组。
normalizeMap(states).forEach(function (ref) {
var key = ref.key;
var val = ref.val;
res[key] = function mappedState () {
var state = this.$store.state;
var getters = this.$store.getters;
// 如果存在命名空间（namespace），则通过 getModuleByNamespace 函数获取对应的模块。
if (namespace) {
var module = getModuleByNamespace(this.$store, 'mapState', namespace);
// 如果未找到该模块，则直接返回。
if (!module) {
return
}
// 如果存在命名空间且找到了对应模块，将模块的状态赋值给 state，模块的 getters 赋值给 getters。
state = module.context.state;
getters = module.context.getters;
}
// 根据传入的 val 参数的类型来进行处理：
// 如果 val 是一个函数，则调用该函数，并传入 state 和 getters 作为参数，将函数的返回值作为最终的映射结果。
// 如果 val 是一个字符串，则将 state[val] 作为最终的映射结果，即通过该字符串作为属性名获取状态对象中对应的值。
return typeof val === 'function'
? val.call(this, state, getters)
: state[val]
};
// 在开发者工具中标记该计算属性为 Vuex 的 getter，设置 res[key].vuex = true
res[key].vuex = true;
});
// 返回存储了映射关系的结果对象 res，其中每个键名对应一个计算属性函数。
return res
});
mapGetters
mapGetters和mapState类似，只不过getters必须是一个方法，state因为只是一个值，或者有可能是一个方法。 所以getters只要正确的返回key对应的val给computed去执行就可以了。
mapMutations 和mapActions
var mapMutations = normalizeNamespace(function (namespace, mutations) {
var res = {};
if ( !isValidMap(mutations)) {
console.error('[vuex] mapMutations: mapper parameter must be either an Array or an Object');
}
normalizeMap(mutations).forEach(function (ref) {
var key = ref.key;
var val = ref.val;
res[key] = function mappedMutation () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
// 在 mappedMutation 函数内部，将 this.$store.commit 方法赋值给变量 commit，该方法用于触发 mutation。
var commit = this.$store.commit;
// mapActions
// var dispatch = this.$store.dispatch;
// 如果存在命名空间，则通过 getModuleByNamespace 函数获取指定命名空间的模块对象，并将其上的 commit 方法赋值给 commit 变量。
if (namespace) {
var module = getModuleByNamespace(this.$store, 'mapMutations', namespace);
if (!module) {
return
}
commit = module.context.commit;
// mapActions
// dispatch = module.context.dispatch;
}
// 如果 val 是一个函数，则通过 val.apply 调用该函数，并传递 commit 方法和参数 args。
// 如果 val 是一个字符串，则通过 commit.apply 调用 commit 方法，并传递 Vuex 的 $store 对象、val 和参数 args。
return typeof val === 'function'
? val.apply(this, [commit].concat(args))
: commit.apply(this.$store, [val].concat(args))
};
});
return res
});
mapActions类似，只不过actions调用的是 dispatch函数，最后返回了一个Promise。然后交给commit执行。
参考
转载自:https://juejin.cn/post/7241406861143162935