vuex我也能手写了!

前言

vuex给组件通信带来了极大便利,想想我们是不是也能打造一个简易版的vuex呢?

正文

实现vuex

vuex的基本用法如下:

  1. 首先引入createStore ,调用createStore(传入一个对象 作为参数)并将结果store这个实例对象抛出 ,在main.js中引入 store后将它use掉。
  2. 访问仓库数据只需引入useStore调用它后就能访问了。
  3. 触发mutations中的方法需使用commit('方法名' , 参数)来触发

步骤一

我们根据它的基本用法,我们使用 先搭建一个基本框架

js 复制代码
class Store {
    constructor(options) {
        this.$options = options  //一个对象
        this._state = reactive({  //响应式数据源
          data: options.state()
        })
        this._mutations = options.mutations
    }

function createStore(options) {
  return new Store(options)
}

export {
  createStore
}

步骤二

我们访问仓库数据源会直接store.state ,但是这里访问则是store._state.data ,那么可以使用get关键字去声明一个函数,直接解决问题!

js 复制代码
get state() { 
    return this._state.data
}

步骤三

因为 Vuex 插件需要被 use() 才能被使用,所以必须要有个 install 方法,其中接收的参数app 就是Vue ,我们利用 Vue 的provide方法将其提供出去

js 复制代码
 install(app) {   //将store挂载到全局   app就是vue
    app.provide('_store_', this)
 }

步骤四

为了能获取到仓库数据,我们需要打造一个useStore方法并抛出,也就是说把这个仓库的实例对象注入到组件中。(const store = useStore() 相当于 inject('store'))

js 复制代码
function useStore() {
  return inject('_store_')
}

步骤五

我们要访问仓库中mutations的方法得使用store.commit()进行触发,它接收一个函数名 ,其它为剩余的参数

js 复制代码
 commit(method, ...args) {  //触发mutations中的方法
    const fn = this._mutations[method]  //获取mutations中的方法
    fn && fn(this.state, ...args)  //如存在则调用mutation中的方法,这个方法接收state和剩余参数
 }

这里只打造了可以访问数据源和触发mutation中方法的简易版vuex,其它模块的实现也不会太难,最后附上整份代码:

js 复制代码
//手动实现vuex
import { reactive, inject } from 'vue'
class Store {
   constructor(options) {
        this.$options = options  //一个对象
        this._state = reactive({  //响应式数据源
          data: options.state()
        })
        this._mutations = options.mutations
   }

  get state() {
    return this._state.data
  }

  commit(method, ...args) {  //触发mutations中的方法
    const fn = this._mutations[method]  //获取mutations中的方法
    fn && fn(this.state, ...args)  //如存在则调用这个方法
  }

  install(app) {   //将store挂载到全局   app就是vue
    app.provide('_store_', this)
  }

}

function createStore(options) {
  return new Store(options)
}

function useStore() {
  return inject('_store_')
}

export {
  createStore,
  useStore
}
相关推荐
ElasticPDF-新国产PDF编辑器6 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin8 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌8 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光8 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs8 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石8 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking10 小时前
解决 axios get请求瞎转义问题
vue.js
向阳25610 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特10 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~10 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习