如何手写一个简易的 Vuex
更新时间：2020年10月10日 10:12:03 作者：jacky-summer
这篇文章主要介绍了如何手写一个简易的 Vuex，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
前言
本文适合使用过 Vuex 的人阅读，来了解下怎么自己实现一个 Vuex。
基本骨架
这是本项目的src/store/index.js文件，看看一般 vuex 的使用
import Vue from 'vue'
import Vuex from './myvuex' // 引入自己写的 vuex
import * as getters from './getters'
import * as actions from './actions'
import state from './state'
import mutations from './mutations'
Vue.use(Vuex) // Vue.use(plugin)方法使用vuex插件
// vuex 导出一个类叫Store，并传入对象作为参数
export default new Vuex.Store({
state,
mutations,
actions,
getters,
})
Vue.use的用法：
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
- 该方法需要在调用 new Vue() 之前被调用。
- 当 install 方法被同一个插件多次调用，插件将只会被安装一次。
即是我们需要在./myvuex.js中导出 install方法，同时导出一个类Store，于是第一步可以写出代码：
let Vue = null
class Store {
constructor(options) {}
}
function install(_Vue) {
Vue = _Vue // 上面Store类需要能获取到Vue
}
export default {
Store,
install,
}
install 方法
当我们使用 vuex 的时候，每一个组件上面都有一个this.$store属性，里面包含了 state，mutations， actions， getters 等，所以我们也需要在每个组件上都挂载一个$store 属性,要让每一个组件都能获取到，这里我们使用Vue.mixin(mixin)，用法介绍如下：
全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。可以使用混入向组件注入自定义的行为，它将影响每一个之后创建的 Vue 实例。
function install(_Vue) {
Vue = _Vue // install方法调用时，会将Vue作为参数传入（上面Store类需要用到Vue）
// 实现每一个组件，都能通过this调用$store
Vue.mixin({
beforeCreate() {
// 通过this.$options可以获取new Vue({参数}) 传递的参数
if (this.$options && this.$options.store) {
// 证明这个this是根实例，也就是new Vue产生的那个实例
this.$store = this.$options.store
} else if (this.$parent && this.$parent.$store) {
// 子组件获取父组件的$store属性
this.$store = this.$parent.$store
}
},
})
}
state
由于 Vuex 是基于 Vue 的响应式原理基础，所以我们要让数据改变可刷新视图，则需要创建一个 vue 实例
class Store {
// options 即是 Vuex.Store({})传入的参数
constructor(options) {
// vuex 的核心就是借用了vue的实例，因为vue的实例数据变化，会刷新视图
let vm = new Vue({
data: {
state: options.state,
},
})
// state
this.state = vm.state
}
}
commit
我们使用 vuex 改变数据时，是触发 commit 方法，即是这样使用的：
this.$store.commit('eventName', '参数' );
所以我们要实现一个commit方法，把 Store 构造函数传入的 mutations 做下处理
class Store {
constructor(options) {
// 实现 state ...
// mutations
this.mutations = {} // 存储传进来的mutations
let mutations = options.mutations || {}
// 循环取出事件名进行处理（mutations[事件名]: 执行方法）
Object.keys(mutations).forEach(key => {
this.mutations[key] = params => {
mutations[key].call(this, this.state, params) // 修正this指向
}
})
}
commit = (key, params) => {
// key为要触发的事件名
this.mutations[key](params)
}
}
dispatch
跟上面的 commit 流程同理
class Store {
constructor(options = {}) {
// ...
// actions
this.actions = {}
let actions = options.actions || {}
Object.keys(actions).forEach(key => {
this.actions[key] = params => {
actions[key].call(this, this, params)
}
})
}
dispatch = (type, payload) => {
this.actions[type](payload)
}
}
getters
getters 实际就是返回 state 的值，在使用的时候是放在 computed 属性，每一个 getter 都是函数形式；
getters 是需要双向绑定的。但不需要双向绑定所有的 getters，只需要绑定项目中事件使用的 getters。
这里使用Object.defineProperty()方法，它会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
class Store {
constructor(options = {}) {
// ...
// getters
this.getters = {}
let getters = options.getters || {}
Object.keys(getters).forEach(key => {
Object.defineProperty(this.getters, key, {
get: () => {
return getters[key].call(this, this.state)
},
})
})
}
}
到此为止，已经可以使用我们自己写的 vuex 做一些基本操作了，但只能通过this.$store.xx的形式调用，故需要再实现方法。
map 辅助函数
先来说说 mapState
没有 map 辅助函数之前这样使用：
computed: {
count () {
return this.$store.state.count
}
}
当映射的计算属性的名称与 state 的子节点名称相同时，给 mapState 传一个字符串数组。
computed: {
// 使用对象展开运算符将此对象混入到外部对象中
...mapState(['count'])
}
我们这里简单就只实现数组的情况
export const mapState = args => {
let obj = {}
args.forEach(item => {
obj[item] = function() {
return this.$store.state[item]
}
})
return obj
}
之后几个 map 辅助函数都是类似
- mapGetters
export const mapGetters = args => {
let obj = {}
args.forEach(item => {
obj[item] = function() {
return this.$store.getters[item]
}
})
return obj
}
- mapMutations
export const mapMutations = args => {
let obj = {}
args.forEach(item => {
obj[item] = function(params) {
return this.$store.commit(item, params)
}
})
return obj
}
- mapActions
export const mapActions = args => {
let obj = {}
args.forEach(item => {
obj[item] = function(payload) {
return this.$store.dispatch(item, payload)
}
})
return obj
}
完整代码
let Vue = null
class Store {
constructor(options) {
// vuex 的核心就是借用了vue的实例，因为vue的实例数据变化，会刷新视图
let vm = new Vue({
data: {
state: options.state,
},
})
// state
this.state = vm.state
// mutations
this.mutations = {} // 存储传进来的mutations
let mutations = options.mutations || {}
Object.keys(mutations).forEach(key => {
this.mutations[key] = params => {
mutations[key].call(this, this.state, params)
}
})
// actions
this.actions = {}
let actions = options.actions || {}
Object.keys(actions).forEach(key => {
this.actions[key] = params => {
actions[key].call(this, this, params)
}
})
// getters
this.getters = {}
let getters = options.getters || {}
Object.keys(getters).forEach(key => {
Object.defineProperty(this.getters, key, {
get: () => {
return getters[key].call(this, this.state)
},
})
})
}
commit = (key, params) => {
this.mutations[key](params)
}
dispatch = (type, payload) => {
this.actions[type](payload)
}
}
export const mapState = args => {
let obj = {}
args.forEach(item => {
obj[item] = function() {
return this.$store.state[item]
}
})
return obj
}
export const mapGetters = args => {
let obj = {}
args.forEach(item => {
obj[item] = function() {
return this.$store.getters[item]
}
})
return obj
}
export const mapMutations = args => {
let obj = {}
args.forEach(item => {
obj[item] = function(params) {
return this.$store.commit(item, params)
}
})
return obj
}
export const mapActions = args => {
let obj = {}
args.forEach(item => {
obj[item] = function(payload) {
return this.$store.dispatch(item, payload)
}
})
return obj
}
function install(_Vue) {
Vue = _Vue // install方法调用时，会将Vue作为参数传入（上面Store类需要用到Vue）
// 实现每一个组件，都能通过this调用$store
Vue.mixin({
beforeCreate() {
// 通过this.$options可以获取new Vue({参数}) 传递的参数
if (this.$options && this.$options.store) {
// 证明这个this是根实例，也就是new Vue产生的那个实例
this.$store = this.$options.store
} else if (this.$parent && this.$parent.$store) {
// 子组件获取父组件的$store属性
this.$store = this.$parent.$store
}
},
})
}
export default {
Store,
install,
}
以上就是如何手写一个简易的 Vuex的详细内容，更多关于手写 vuex的资料请关注脚本之家其它相关文章！
相关文章
BuildAdmin elementPlus自定义表头添加tooltip方法示例
这篇文章主要介绍了BuildAdmin elementPlus 自定义表头,添加tooltip实现方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要为大家详细介绍了Vue如何利用transition标签实现页面跳转动画，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起一下2023-08-08
WebStorm启动vue项目报错代码:1080 throw err解决办法
在使用webstorm新建vue项目时常会遇到一些报错,下面这篇文章主要给大家介绍了关于WebStorm启动vue项目报错代码:1080 throw err的解决办法,文中将解决办法介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了如何在vue 中使用柱状图 并自修改配置，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
因为项目需要，近期做了一个公众号网页开发。在此期间也踩了一些坑，解决这些坑之后，准备对这个项目进行复盘。记录下项目从开发到上线所解决的问题，并对使用vue进行公众号开发的步骤进行一个总结。方便以后有问题进行查阅。希望对你有所帮助2021-05-05
在移动应用开发中,uniApp框架提供了一种跨平台的解决方案,允许开发者使用一套代码来构建iOS、Android等多平台的应用,这篇文章主要给大家介绍了关于uniapp使用webview内嵌H5的注意事项,需要的朋友可以参考下2024-07-07
基于vue-cli npm run build之后vendor.js文件过大的解决方法
今天小编就为大家分享一篇基于vue-cli npm run build之后vendor.js文件过大的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了基于Vue.js的表格分页组件使用方法，了解了Vue.js的特点，感兴趣的朋友可以参考一下2016-05-05
这篇文章主要介绍了vue-cli创建的项目中的gitHooks原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
基于Vue+element-ui 的Table二次封装的实现
这篇文章主要介绍了基于Vue+element-ui 的Table二次封装的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论