如何手写一个简易的 Vuex


Posted in Javascript onOctober 10, 2020

前言

本文适合使用过 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的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
地震发生中逃生十大法则
May 12 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 #Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 #Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 #Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 #Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 #jQuery
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 #Javascript
vue实现选中效果
Oct 07 #Javascript
You might like
PHP函数utf8转gb2312编码
2006/12/21 PHP
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
学习php中的正则表达式
2014/08/17 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
js使用心得分享
2015/01/13 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
软件测试题目
2013/02/27 面试题
夫妻吵架保证书
2015/05/08 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL