vuex的实现
- 2019 年 10 月 3 日
- 笔记
源代码可以查看我的github： https://github.com/Jasonwang911/TryHardEveryDay/tree/master/Vuex/vuex-resouce 欢迎star
先描述一下vuex的使用：
store.js
import Vue from "vue"; import Vuex from "./vuex/myVuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { age: 20 }, getters: { // date 的 computed myAge(state) { return state.age + 10; } }, mutations: { syncAdd(state, payload) { state.age += payload; }, syncMinuts(state, payload) { state.age -= payload; } }, actions: { asyncMinus({ commit }, payload) { setTimeout(() => { commit("syncMinuts", payload); }, 1000); } } });
main.js中引用：
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; Vue.config.productionTip = false; new Vue({ router, store, // 在每个实例上添加一个 $store 对象 render: h => h(App) }).$mount("#app");
先说这两点
1. Store是一个类
2. Vue.use(Vuex);
首先建立一个类并导出，同时导出一个install的方法，这个方法接收一个参数 _Vue，即 vue实例
let Vue class Store { } const install = _Vue => { Vue = _Vue } export default { Store, install }
然后再main.js 中所作的就是讲store实例注册到vue的跟组件和所有的子组件上， 这里使用了Vue.mixin()的方法，在每个组件中注入$store，并在子组件中通过 this.$parents来拿到父组件的$store并添加到子组件的实例上
const install = _Vue => { Vue = _Vue; // console.log(Vue); Vue.mixin({ beforeCreate() { if (this.$options && this.$options.store) { // 根组件 this.$store = this.$options.store; } else { this.$store = this.$parent && this.$parent.$store; } } }); };
先来看看state是怎么用的
import Vue from "vue"; import Vuex from "./vuex/myVuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { age: 20 }, });
在new Vuex.Store的实例的时候传入了一个对象，这个对象options
然后我们添加state的这个属性
class Store { constructor(options) { // options 是 new Vuex时注入的对象 this._vm = options.state || {}; } get state() { // store.state return this._vm; } }
这里有一个问题，通过options获取的state并不是Observe状态的，并不能响应式的更新视图，如何做才能使state变成响应式的并触发视图的更新呢，也就是通过Vue的数据劫持进行包装转换，
这里通过new Vue，并把state放入创建的Vue的data中来实现这个操作
class Store { constructor(options) { // options 是 new Vuex时注入的对象 this._vm = new Vue({ data: { state: options.state } }); } get state() { // store.state return this._vm.state; } }
这样，$store.state就变成了响应式的状态了
接下来，同理 getters，mutations， actions 也是通过options传入获取的
import Vue from "vue"; import Vuex from "./vuex/myVuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { age: 20 }, getters: { // date 的 computed myAge(state) { return state.age + 10; } }, mutations: { syncAdd(state, payload) { state.age += payload; }, syncMinuts(state, payload) { state.age -= payload; } }, actions: { asyncMinus({ commit }, payload) { setTimeout(() => { commit("syncMinuts", payload); }, 1000); } } });
先来实现一下getters方法： 每一个getter方法其实都是getters的一个属性，但是这个属性返回了一个函数。属性可以返回函数的方法可以通过Object.definedProperty()中的get()来实现：
class Store { constructor(options) { // options 是 new Vuex.Store时注入的对象 // getters 拿到new Store的时候传入的getters let getters = options.getters || {}; // 创建 Store 的 getters 属性 this.getters = {}; Object.keys(getters).forEach(getterName => { // 是个函数，但是返回的是个属性 Object.defineProperty(this.getters, getterName, { get() { return getters[getterName](this.state); } }); }); } }
这里其实只做了一件事情： 循环传入的options上的getters对象，并在用户调用getters中的每一个属性的时候返回一个getter函数并执行，
同理，mutations和actions也是如此实现的，只不过各自多了一个commit和dispatch的方法。
commit 和 dispatch 方法的原理就是通过参数type去对应的mutations和actions中查找对应的mutation或者action传入payload并执行
dispatch = (type, payload) => { this.actions[type](payload); }; commit = (type, payload) => { this.mutations[type](payload); };
查看Vuex源码，作者巧妙的将这个通过对象key进行循环的方法封装成了一个forEach函数：
const forEach = (obj, callback) => { Object.keys(obj).forEach(key => { callback(key, obj[key]); }); };
这个函数传入了一个对象和一个回调函数，通过对key的循环，执行了回调函数，并向回调函数中传入了循环出对象obj的key和value，整理后整个Store对象变成了如下：
const forEach = (obj, callback) => { Object.keys(obj).forEach(key => { callback(key, obj[key]); }); }; class Store { constructor(options) { // options 是 new Vuex时注入的对象 // this._s = options.state || {}; // 将store中的状态变成可被观测的数据 this._vm = new Vue({ data: { state: options.state } }); // getters 拿到new Store的时候传入的getters let getters = options.getters || {}; // 创建 Store 的 getters 属性 this.getters = {}; forEach(getters, (getterName, fn) => { Object.defineProperty(this.getters, getterName, { get: () => { return fn(this.state); } }); }); // mutations let mutations = options.mutations || {}; this.mutations = {}; forEach(mutations, (mutationName, fn) => { this.mutations[mutationName] = payload => { fn(this.state, payload); }; }); // actions let actions = options.actions || {}; this.actions = {}; forEach(actions, (actionName, fn) => { this.actions[actionName] = payload => { fn(this, payload); }; }); } dispatch = (type, payload) => { this.actions[type](payload); }; commit = (type, payload) => { this.mutations[type](payload); }; get state() { return this._vm.state; } }
以上基本实现了一个简单的vuex的基本流程，所有的源码可以在我的github上查看，后续会继续修改支持vuex的模块化。
