前言
本文适合使用过 Vuex 的人阅读&＃xff0c;来了解下怎么自己实现一个 Vuex。
基本骨架
这是本项目的src/store/index.js文件&＃xff0c;看看一般 vuex 的使用
import Vue from &＃39;vue&＃39;
import Vuex from &＃39;./myvuex&＃39; // 引入自己写的 vuex
import * as getters from &＃39;./getters&＃39;
import * as actions from &＃39;./actions&＃39;
import state from &＃39;./state&＃39;
import mutations from &＃39;./mutations&＃39;
Vue.use(Vuex) // Vue.use(plugin)方法使用vuex插件
// vuex 导出一个类叫Store&＃xff0c;并传入对象作为参数
export default new Vuex.Store({
state,
mutations,
actions,
getters,
})
Vue.use的用法&＃xff1a;
❝安装 Vue.js 插件。如果插件是一个对象&＃xff0c;必须提供 install 方法。如果插件是一个函数&＃xff0c;它会被作为 install 方法。install 方法调用时&＃xff0c;会将 Vue 作为参数传入。这个方法的第一个参数是 Vue 构造器&＃xff0c;第二个参数是一个可选的选项对象。
❞
- 该方法需要在调用 new Vue() 之前被调用。
- 当 install 方法被同一个插件多次调用&＃xff0c;插件将只会被安装一次。
即是我们需要在./myvuex.js中导出 install方法&＃xff0c;同时导出一个类Store&＃xff0c;于是第一步可以写出代码&＃xff1a;
let Vue &＃61; null
class Store {
constructor(options) {}
}
function install(_Vue) {
Vue &＃61; _Vue // 上面Store类需要能获取到Vue
}
export default {
Store,
install,
}
install 方法
当我们使用 vuex 的时候&＃xff0c;每一个组件上面都有一个this.$store属性&＃xff0c;里面包含了 state&＃xff0c;mutations&＃xff0c; actions&＃xff0c; getters 等&＃xff0c;所以我们也需要在每个组件上都挂载一个$store 属性,要让每一个组件都能获取到&＃xff0c;这里我们使用Vue.mixin(mixin)&＃xff0c;用法介绍如下&＃xff1a;
❝全局注册一个混入&＃xff0c;影响注册之后所有创建的每个 Vue 实例。可以使用混入向组件注入自定义的行为&＃xff0c;它将影响每一个之后创建的 Vue 实例。
❞
function install(_Vue) {
Vue &＃61; _Vue // install方法调用时&＃xff0c;会将Vue作为参数传入(上面Store类需要用到Vue)
// 实现每一个组件&＃xff0c;都能通过this调用$store
Vue.mixin({
beforeCreate() {
// 通过this.$options可以获取new Vue({参数}) 传递的参数
if (this.$options && this.$options.store) {
// 证明这个this是根实例&＃xff0c;也就是new Vue产生的那个实例
this.$store &＃61; this.$options.store
} else if (this.$parent && this.$parent.$store) {
// 子组件获取父组件的$store属性
this.$store &＃61; this.$parent.$store
}
},
})
}
state
由于 Vuex 是基于 Vue 的响应式原理基础&＃xff0c;所以我们要让数据改变可刷新视图&＃xff0c;则需要创建一个 vue 实例 由于
class Store {
// options 即是 Vuex.Store({})传入的参数
constructor(options) {
// vuex 的核心就是借用了vue的实例&＃xff0c;因为vue的实例数据变化&＃xff0c;会刷新视图
let vm &＃61; new Vue({
data: {
state: options.state,
},
})
// state
this.state &＃61; vm.state
}
}
commit
我们使用 vuex 改变数据时&＃xff0c;是触发 commit 方法&＃xff0c;即是这样使用的&＃xff1a;
this.$store.commit(&＃39;eventName&＃39;, &＃39;参数&＃39; );
所以我们要实现一个commit方法&＃xff0c;把 Store 构造函数传入的 mutations 做下处理
class Store {
constructor(options) {
// 实现 state ...
// mutations
this.mutations &＃61; {} // 存储传进来的mutations
let mutations &＃61; options.mutations || {}
// 循环取出事件名进行处理(mutations[事件名]: 执行方法)
Object.keys(mutations).forEach(key &＃61;> {
this.mutations[key] &＃61; params &＃61;> {
mutations[key].call(this, this.state, params) // 修正this指向
}
})
}
commit &＃61; (key, params) &＃61;> {
// key为要触发的事件名
this.mutations[key](params)
}
}
dispatch
跟上面的 commit 流程同理
class Store {
constructor(options &＃61; {}) {
// ...
// actions
this.actions &＃61; {}
let actions &＃61; options.actions || {}
Object.keys(actions).forEach(key &＃61;> {
this.actions[key] &＃61; params &＃61;> {
actions[key].call(this, this, params)
}
})
}
dispatch &＃61; (type, payload) &＃61;> {
this.actions[type](payload)
}
}
getters
getters 实际就是返回 state 的值&＃xff0c;在使用的时候是放在 computed 属性&＃xff0c;每一个 getter 都是函数形式&＃xff1b;
getters 是需要双向绑定的。但不需要双向绑定所有的 getters&＃xff0c;只需要绑定项目中事件使用的 getters。
这里使用Object.defineProperty()方法&＃xff0c;它会直接在一个对象上定义一个新属性&＃xff0c;或者修改一个对象的现有属性&＃xff0c;并返回此对象。
class Store {
constructor(options &＃61; {}) {
// ...
// getters
this.getters &＃61; {}
let getters &＃61; options.getters || {}
Object.keys(getters).forEach(key &＃61;> {
Object.defineProperty(this.getters, key, {
get: () &＃61;> {
return getters[key].call(this, this.state)
},
})
})
}
}
到此为止&＃xff0c;已经可以使用我们自己写的 vuex 做一些基本操作了&＃xff0c;但只能通过this.$store.xx的形式调用&＃xff0c;故需要再实现方法。
map 辅助函数
先来说说 mapState
没有 map 辅助函数之前这样使用&＃xff1a;
computed: {
count () {
return this.$store.state.count
}
}
当映射的计算属性的名称与 state 的子节点名称相同时&＃xff0c;给 mapState 传一个字符串数组。
computed: {
// 使用对象展开运算符将此对象混入到外部对象中
...mapState([&＃39;count&＃39;])
}
我们这里简单就只实现数组的情况
export const mapState &＃61; args &＃61;> {
let obj &＃61; {}
args.forEach(item &＃61;> {
obj[item] &＃61; function () {
return this.$store.state[item]
}
})
return obj
}
之后几个 map 辅助函数都是类似
export const mapGetters &＃61; args &＃61;> {
let obj &＃61; {}
args.forEach(item &＃61;> {
obj[item] &＃61; function () {
return this.$store.getters[item]
}
})
return obj
}
export const mapMutations &＃61; args &＃61;> {
let obj &＃61; {}
args.forEach(item &＃61;> {
obj[item] &＃61; function (params) {
return this.$store.commit(item, params)
}
})
return obj
}
export const mapActions &＃61; args &＃61;> {
let obj &＃61; {}
args.forEach(item &＃61;> {
obj[item] &＃61; function (payload) {
return this.$store.dispatch(item, payload)
}
})
return obj
}
完整代码
let Vue &＃61; null
class Store {
constructor(options) {
// vuex 的核心就是借用了vue的实例&＃xff0c;因为vue的实例数据变化&＃xff0c;会刷新视图
let vm &＃61; new Vue({
data: {
state: options.state,
},
})
// state
this.state &＃61; vm.state
// mutations
this.mutations &＃61; {} // 存储传进来的mutations
let mutations &＃61; options.mutations || {}
Object.keys(mutations).forEach(key &＃61;> {
this.mutations[key] &＃61; params &＃61;> {
mutations[key].call(this, this.state, params)
}
})
// actions
this.actions &＃61; {}
let actions &＃61; options.actions || {}
Object.keys(actions).forEach(key &＃61;> {
this.actions[key] &＃61; params &＃61;> {
actions[key].call(this, this, params)
}
})
// getters
this.getters &＃61; {}
let getters &＃61; options.getters || {}
Object.keys(getters).forEach(key &＃61;> {
Object.defineProperty(this.getters, key, {
get: () &＃61;> {
return getters[key].call(this, this.state)
},
})
})
}
commit &＃61; (key, params) &＃61;> {
this.mutations[key](params)
}
dispatch &＃61; (type, payload) &＃61;> {
this.actions[type](payload)
}
}
export const mapState &＃61; args &＃61;> {
let obj &＃61; {}
args.forEach(item &＃61;> {
obj[item] &＃61; function () {
return this.$store.state[item]
}
})
return obj
}
export const mapGetters &＃61; args &＃61;> {
let obj &＃61; {}
args.forEach(item &＃61;> {
obj[item] &＃61; function () {
return this.$store.getters[item]
}
})
return obj
}
export const mapMutations &＃61; args &＃61;> {
let obj &＃61; {}
args.forEach(item &＃61;> {
obj[item] &＃61; function (params) {
return this.$store.commit(item, params)
}
})
return obj
}
export const mapActions &＃61; args &＃61;> {
let obj &＃61; {}
args.forEach(item &＃61;> {
obj[item] &＃61; function (payload) {
return this.$store.dispatch(item, payload)
}
})
return obj
}
function install(_Vue) {
Vue &＃61; _Vue // install方法调用时&＃xff0c;会将Vue作为参数传入(上面Store类需要用到Vue)
// 实现每一个组件&＃xff0c;都能通过this调用$store
Vue.mixin({
beforeCreate() {
// 通过this.$options可以获取new Vue({参数}) 传递的参数
if (this.$options && this.$options.store) {
// 证明这个this是根实例&＃xff0c;也就是new Vue产生的那个实例
this.$store &＃61; this.$options.store
} else if (this.$parent && this.$parent.$store) {
// 子组件获取父组件的$store属性
this.$store &＃61; this.$parent.$store
}
},
})
}
export default {
Store,
install,
}
整个项目的源码地址&＃xff1a;mini-vuex
❝欢迎关注我掘金账号和Github技术博客&＃xff1a;
- 掘金&＃xff1a;https://juejin.im/user/1257497033714477
- Github&＃xff1a;https://github.com/Jacky-Summer
- 觉得对你有帮助或有启发的话欢迎 star&＃xff0c;你的鼓励是我持续创作的动力~
- 如需在微信公众号平台转载请联系作者授权同意&＃xff0c;其它途径转载请在文章开头注明作者和文章出处。
❞
京公网安备 11010802041100号