vuex在用 vue一年之后就不怎么用了,搭建项目会预留,但是几乎不用了。之前也说过vuex使用场景,vue是单项数据流,所以多组件直接共享状态的时候可以使用,另外就是做一些缓存,减少请求。
只是刷新就会初始化的问题,配合本地存储,所以很多使用vuex和本地缓存,总觉得有点矛盾,甚至有些场景用本地缓存之后就不需要vuex了。除非这个数据是需要响应式的。虽然不怎么用,简单了解一下核心原理还是需要的。
Vue.use(Vuex)
new Vuex.Store({})
所以暴露出去两个方法,install(vue.use会调用install)和Store方法,且vuex是个类或者构造函数:
let Vue;
export class Store {
constructor(options){}}
export const install = (_Vue) =>{
Vue = _Vue;
applyMixin(Vue);
}
看vuex源码,调用了applyMixin方法,然后执行Vue.mixin({ beforeCreate: vuexInit });通过mixin方法获取实例。所以执行vuexInit的时候就能通过this获取实例是否有store属性(new Vue的时候把store传入),有就给vue实例添加$store:
function vuexInit () {
var options = this.$options;
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;
}
}
this.store = options.parent.store;主要是给组件加store,当前组件的this上面没有,父组件有,就把父组件的给当前组件也添加store。
最核心的部分就是通过产生一个单独的vue实例实现vuex的响应式:
this._vm = new Vue({
data:{
$$state:state,
}
});
源码是store._vm,代码里面搜索new Vue就能看见。官网也有文档:
以 _ 或 开头的 property 不会被 Vue 实例代理,因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.data._property 的方式访问这些 property(官网 学习/api/data里面有介绍)。但其实我不明白为什么要两个
实现getter、mutations、actions就比较简单了:
this.mutations = {};
forEachValue(options.mutations, (fn, key) => {
this.mutations[key] = (payload) => fn.call(this, this.state, payload)
});
差不多就是发布订阅,把所有的方法都放到一个对象里面,只是getter还加了computed做缓存。
然后我们调用commit的时候调用mutations:
commit = (type, payload) => {
this.mutations[type](payload);
}
actions也差不多。
今天主要是知道vuex是通过mixin判断vue实例是否有store,然后挂载$store,通过单独创建一个vue实例实现响应式,mutations和actions用发布订阅的方法实现。至于模块就不说了,看了有些复杂。
辅助函数也还好,就是返回一个函数,然后函数里面调用this.$store.emit:
const mapMutations = (mutationList) => {
let res = {};
for (let i = 0; i < mutationList.length; i++) {
let name = mutationList[i]
res[name] = function(payload){
this.$store.commit(name,payload);
}
}
return res
}
这跟函数切片编程一样,这边只是简写了。
其实突然发现,最近分享源码的都只能自己看懂,别人应该都看不懂,只是里面有一些可以稍微提取一下,比如通过单独创建一个vue实例实现响应式这样的。
(完)
Coding 个人笔记