手写简易版Vuex，初探Vuex原理

狂砍2分4篮板2023-08-13 15:51

一、Vuex是如何使用的

在Vue项目中，使用vuex的步骤大概如下：

  1. 在src下创建一个store/index.js，然后添加如下代码
js 复制代码 
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})
  1. 在main.js引入
js 复制代码 
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

然后就可以通过this.$store访问了。

二、开始手写

1、创建文件

在src/store下新建一个自己手写的文件vuex.js。通过前面官方vuex的使用可以知道，vuex主要用到了两个东西：Vue.use()和new Vuex.Store()。

  • Vue.useAPI 要求传入的参数是一个对象或函数，如果是对象的话对象里需要包含一个install方法。

  • new Vuex.Store({})则需要我们创建一个Store类。

所以我们首先需要创建如下最基本的满足条件：一个Store类和一个install方法。

js 复制代码 
// src/store/vuex.js
class Store {
    constructor() {}
}

const install = (Vue) => {}

const vuex = {
  Store,
  install
}

export default vuex

然后替换掉之前引入的官方vuex，改成我们自己实现的vuex。

js 复制代码 
// src/store/index.js
import Vue from 'vue'
// import Vuex from 'vuex'
import Vuex from './vuex.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: '张三'
  },
  getters: {},
  mutations: {},
  actions: {}
})

替换后发现一切正常，没什么报错信息出现，接下来我们一步一步来实现功能。

2、实现install

前面在main.js里我们仅仅是在根组件注入了store，我们希望所有组件都能拥有store，所以我们可以使用Vue.mixin进行全局混入。

js 复制代码 
const install = (Vue) => {
  Vue.mixin({
    beforeCreate() {
      if (this.$options.store) { // 根组件
        this.$store = this.$options.store
      } else if (this.$parent && this.$parent.$store) { // 子组件
        this.$store = this.$parent.$store
      }
    }
  })
}

从$options里可以获取我们一开始在根组件里注入的store，然后赋值给$store。 由于父组件的beforeCreate执行先于子组件的beforeCreate，所以我们在beforeCreate里可以拿到父组件已经存在的$store并将其赋值给子组件，使得每个组件都拥有$store，都可以通过this.$store调用。

3、实现state

现在我们通过this.$store.state是无法取到值的，前面我们通过new传入了一个对象：

css 复制代码 
{
  state: {
    name: '张三'
  },
  getters: {},
  mutations: {},
  actions: {}
}

所以我们可以在类的构造器里获得这个对象参数。

js 复制代码 
class Store {
  constructor(options) {
    this.state = options.state || {}
  }
}

打印this.$store.state：

到这里我们的工作还没完成，因为state是支持响应式的，如何让state实现响应式？我们都知道Vue里的data是响应式的，所有我们可以借助它来实现我们想要的效果。

js 复制代码 
class Store {
  constructor(options) {
    // this.state = options.state || {}
    this._vm = new Vue({
      data: {
        state: options.state || {}
      }
    })
  }

  get state() {
    return this._vm.state
  }
}

将state传入new Vue()里的data，这样我们便很容易的将state变成了一个响应式数据，此时我们便可以通过this.$store._vm.state获取数据了，但为了方便，后面我们增加get接口并返回_vm.state，方便使用时可以通过this.$store.state取值。

接下来简单测试一下是否生效：

html 复制代码 
<div>{{ $store.state.name }}</div>
js 复制代码 
created() {
    setTimeout(() => {
      // 实际使用中不提倡这种直接修改state的状态
      this.$store.state.name = '李四'
    }, 2000)
},

2秒后可以看到页面视图数据从张三变成了李四，说明我们的state响应式是OK的。

4、实现getters

先看看我们是如何使用getters的：

js 复制代码 
{
  state: {
    name: '张三'
  },
  getters: {
    getHello: (state) => {
      return `hello，${state.name}`
    }
  },
  mutations: {},
  actions: {}
}

可以看到getters对象里实际是一些函数，函数参数里可以拿到state，所以我们在实现时需要把state作为参数抛出来。

js 复制代码 
class Store {
  constructor(options) {
    // this.state = options.state || {}
    this._vm = new Vue({
      data: {
        state: options.state || {}
      }
    })
    // 新增代码
    const getters = options.getters || {}
    this.getters = {}
    Object.keys(getters).forEach(key => {
      Object.defineProperty(this.getters, key, {
        get: () => {
          return getters[key](this.state)
        }
      })
    })
  }

  get state() {
    return this._vm.state
  }
}

因为我们在使用gettters时是不需要写括号的：this.$store.getters.getHello，所以采用Object.defineProperty的get接口实现。

5、实现mutations

mutations是通过commit触发的，因此我们在将传入的mutations对象存储起来后还需要实现commit方法，然后commit根据第一个参数的值触发mutations里对应的方法。

js 复制代码 
this.$store.commit('changeName', payload)
js 复制代码 
mutations: {
  changeName(state, payload) {
    state.name = payload
  }
}

新增mutations实现代码：

js 复制代码 
class Store {
  constructor(options) {
    // 省略前面的代码....

    const mutations = options.mutations || {}
    this.mutations = {}
    Object.keys(mutations).forEach(key => {
      // 将函数存储进this.mutations里
      this.mutations[key] = (param) => {
        mutations[key](this.state, param)
      }
    })
  }

  commit = (type, param) => {
    // 执行this.mutations里对应函数
    this.mutations[type](param)
  }

  get state() {
    return this._vm.state
  }
}

6、实现actions

actions与mutations类似，不同的是actions是通过dispatch调用，在actions里的方法的第一个参数是Store。

js 复制代码 
mutations: {
  changeName(state, payload) {
    state.name = payload
  }
},
actions: {
  changeNameAction({ commit }, payload) {
    commit('changeName', payload)
  }
}
js 复制代码 
setTimeout(() => {
  this.$store.dispatch('changeNameAction', '李四')
}, 3000)

新增actions实现代码：

js 复制代码 
class Store {
  constructor(options) {
    // 省略前面的代码....

    const actions = options.actions || {}
    this.actions = {}
    Object.keys(actions).forEach(key => {
      this.actions[key] = (param) => {
        actions[key](this, param)
      }
    })
  }

  dispatch = (type, param) => {
    this.actions[type](param)
  }

  get state() {
    return this._vm.state
  }
}

三、完整代码

js 复制代码 
import Vue from 'vue'

class Store {
  constructor(options) {
    this._vm = new Vue({
      data: {
        state: options.state || {}
      }
    })
    
    const getters = options.getters || {}
    this.getters = {}
    Object.keys(getters).forEach(key => {
      Object.defineProperty(this.getters, key, {
        get: () => {
          return getters[key](this.state)
        }
      })
    })

    const mutations = options.mutations || {}
    this.mutations = {}
    Object.keys(mutations).forEach(key => {
      this.mutations[key] = (param) => {
        // 将函数存储进this.mutations里
        mutations[key](this.state, param)
      }
    })
    
    const actions = options.actions || {}
    this.actions = {}
    Object.keys(actions).forEach(key => {
      this.actions[key] = (param) => {
        actions[key](this, param)
      }
    })
  }

  dispatch = (type, param) => {
    this.actions[type](param)
  }

  commit = (type, param) => {
    // 执行this.mutations里对应函数
    this.mutations[type](param)
  }

  get state() {
    return this._vm.state
  }
}

const install = (Vue) => {
  Vue.mixin({
    beforeCreate() {
      if (this.$options.store) { // 根组件
        this.$store = this.$options.store
      } else if (this.$parent && this.$parent.$store) { // 子组件
        this.$store = this.$parent.$store
      }
    }
  })
}

const vuex = {
  Store,
  install
}

export default vuex
相关推荐
G018_star sky♬9 小时前
原生JavaScript实现输入验证的界面
javascript·css·css3
火龙谷9 小时前
DrissionPage遇到iframe
开发语言·前端·javascript
千里马-horse9 小时前
搭建 React Native 库
javascript·react native·react.js·native library
艾小码9 小时前
从零到一：这篇JavaScript指南让你成为独立开发者
前端·javascript
绝无仅有9 小时前
某多多大厂面试相关计算机网络知识点总结
后端·面试·架构
绝无仅有9 小时前
调用服务出现网络错误的问题排查与解决
后端·面试·架构
月下点灯9 小时前
🏮一眼就会🗂️大文件分片上传，白送前后端全套功法
javascript·typescript·node.js
顾安r14 小时前
11.8 脚本网页 星际逃生
c语言·前端·javascript·flask
im_AMBER15 小时前
React 17
前端·javascript·笔记·学习·react.js·前端框架
一雨方知深秋15 小时前
2.fs模块对计算机硬盘进行读写操作(Promise进行封装)
javascript·node.js·promise·v8·cpython
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件04BongoCat - 跨平台键盘猫动画工具05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Linux下V2Ray安装配置指南07Labelme从安装到标注：零基础完整指南08《大数据技术原理与应用》实验报告三 熟悉HBase常用操作09jdk21下载、安装（Windows、Linux、macOS）10PyCharm 社区版全平台安装指南