vuex使用方法:
根据vuex使用方法分析:
1、vuex使用是一个插件。
2、需要实现vuex构造函数Store类。
实现方式如下:
(1)state状态管理器的实现:
把用户的传递过来的state放在data里,实现响应式数据。由于state不能让用户随意访问,所以需要对state加上一层封装,变成$$state:oprions.state。
然后实现state的get和set方法:
(2)mutation和actions实现:
1、首先在store类里面,将用户的方法进行存储。
2、实现mutation和actions调用的对应的方法:
commit方法:
实现原理看图片备注,entry就是用户在mutation里写的方法。由于mutation可以直接修改state里的值,所以函数第一个值可以直接传state。
dispath方法:
实现思路与commit方法大致一样,但是entyr出口函数传递的第一个参数不一样。dispath函数里传递的是上下文,可以传递this,this里面包含了commit(),getter()、因为dispatch不能直接修改state里的值,不能直接传递state。
getters方法:
const computed = {}
this.getters = {}
const store = this
Object.keys(this._wapperedGetter).forEach(key => {
const fn = this._wrappedGetters[key]
computed[key] = function() {
return fn(store.state)
}
Object.defineProperty(store.getters, key, {
get: () => store._vm[key]
})
})
3、实现vuex插件安装,加入mixin混入,延迟到vue实例出来后,进行store挂载。