代码改变世界

制作一个轻量级的状态管理插件:Vue-data-state

2021-04-26 18:49  金色海洋(jyk)  阅读(491)  评论(6编辑  收藏  举报

Vuex 是不是有点繁琐?

Vuex 是针对 Vue2 来设计的,因为 option API 本身有很多缺点,所以 Vuex 只好做各种补丁弥补这些缺点,于是变得比较“复杂”。

现在 Vue3 推出了Composition API,功能更强大也弥补了之前的缺点,但是 Vuex 4.0 只是兼容了 Vue3,使用风格上似乎没啥变化。

于是乎怎么看怎么别扭,不是说 Vuex 不够强大,Vuex 的 state 也使用了 reactive ,而且也是用 provide/inject 实现注入的,但是没有后续了,Composition API 的其他特性呢?感觉好浪费呀。

虽然也可以基于 Vuex 用 compositionAPI 的方式实现功能,但是总感觉有点大炮打蚊子的感觉。

做一个轻量级状态管理。

按照“自己动手丰衣足食”的原则,我们自己来做一个轻量级的状态管理。

模仿 Vuex 试着实现了一下基本功能,有点理解为啥 Vuex 弄得那么绕了,因为要把操作函数也给包含进去确实有点难度。
那么就轻量到底吧,只包含状态,不包括 mutations、action 这些操作函数。

于是功能变成这个样子:
vue-data-state功能设计.png

状态:全局状态、局部状态
功能:初始化状态、指定的组件里注入局部状态、子组件里加载局部状态

缓存功能,就是可以把状态存入localstorage里面保存,以及初始化的时候从localstorage里面加载状态。
缓存功能暂时没有实现,还没想好局部状态的缓存方案。

功能简单,写起来也就容易多了,然后顺便做成插件的形式,便于使用。

// 模仿Vuex写一个简单的数据、状态、缓存管理

import { reactive, provide, inject } from 'vue'   

export default {
  // 状态容器
  store: {
    state: {}, // 全局状态
    init: () => {}, // 初始化全局状态
    reg: {}, // 注册局部状态
    get: {} // 获取局部状态
  },

  // 用 symbol 做个标识,避免重名
  storeFlag: Symbol('VuexDataState'),

  // 创建安装插件的实例
  createStore(info) {
    /* info 的结构示例
    const _info = {
      // 全局状态,在main.js里面注入
      global: {
        blogState: { // 每个状态都必须是对象,不支持基础类型
          aaa: '状态演示'
        }
      },
      // 局部状态,需要手动注入
      local: {
        dataList() {
          return {}
        }
      },
      // 初始化函数,可以从后端、前端等获取数据加入状态
      // 注入后被动调用,仅限于全局状态
      init(state) {}
    }
    */

    for (const key in info.global) {
      // 把全局状态存入state
      this.store.state[key] = reactive(info.global[key])
    }
    
    for (const key in info.local) {
      const localKey = Symbol(key)
      // 加上注册函数
      this.store.reg[key] = () => {
        // 把局部状态变成 reactive 的形式
        const state = reactive(info.local[key]())
        // 注入
        provide(localKey, state)
        // 返回状态,
        return state
      }
      this.store.get[key] = () => {
        // 把局部状态变成 reactive 的形式
        const state = inject(localKey)
        // 返回状态, 
        return state
      }
    }

    // 加上初始化函数
    if (typeof info.init === 'function') {
      this.store.init = info.init
    }
    
    const _store = this.store
    const _storeFlag = this.storeFlag
    return {
      // 安装插件
      install (app, options) {
        // console.log('install--我的状态', _store)
        // 注入状态,用 symbol 作为标记,避免重名,避免外部直接用 inject 获取
        app.provide(_storeFlag, _store)
        // 设置模板使用状态
        app.config.globalProperties.$state = _store.state
        // 调用初始化,给全局状态赋值
        _store.init(_store.state)
      }
    }
  },

  // 代码里面调用
  useStore() {
    // 获取全局状态
    const { state, reg, get } = inject(this.storeFlag)

    return {
      state, // 返回全局状态
      reg, // 注册局部状态的函数,并且返回对应的局部状态
      get // 子组件里面获取状态
    }
  }
}

怎么样,够轻吧,不超过一百行代码,如果去掉注释空行的话,大概也就三十多行吧。

  • reactive, provide, inject
    状态要实现响应性,那当然要做成 reactive 形式的。
    provide、inject 实现注入功能。

  • store
    内部状态容器。
    state:状态
    init:全局状态的初始化的函数
    reg:局部状态的注入函数
    get:获取局部状态的函数

  • storeFlag
    用 symbol 做全局状态的标记,避免重名。是不是有一种高大上的感觉?[狗头]

  • useStore
    是不是眼熟,在代码里面获取全局状态的。
    除了返回全局状态外,还可以返回局部状态的注入函数和获取函数。
    因为使用 symbol 作为key,外部无法获取,所以需要内部提供一个函数。(我不会告诉你我是故意的)

如果想把状态变成只读(readonlyReactive)的形式然后在返回,那么可以在这里操作。

  • 组件里的使用方法
import VueDS from 'vue-data-state' 

const { state, reg, get } = VueDS.useStore()

state // 全局状态

// 父组件注入状态,并且返回局部状态,以便父组件使用
const 局部状态 = reg.局部状态名称()

// 子组件获取局部状态
const 局部状态 = get.局部状态名称()

  • createStore
    看着是不是眼熟,功能和 Vuex 的 createStore 是一样的,接收参数创建 store 然后通过插件注入到 vue 的app上面。
    函数返回 install,用于安装插件。

  • _info
    这个没啥用,就是介绍一下参数的属性格式,实现代码的时候看着方便。另外去掉注释就可以做测试用。

  • 第一个for
    遍历全局状态,变成 reactive 挂到 store 里面。

  • 第二个 for
    遍历局部状态,变成注入和获取的函数,挂到 reg 和 get 里面。
    这个 provide 的 key 也采用 symbol 的形式,避免重名。

  • init
    把初始化函数挂上。

  • install
    安装插件,按照 Vue 官网示例,写了这个install。
    对了,我只是把全局状态挂到模板上面了,局部状态没有挂呢。
    局部状态似乎挂不上,还需要再考虑考虑。

先安装资源包

yarn add vue-data-state 

定义状态

// /store-ds/index.js
import VuexDataState from 'vue-data-state'

export default VuexDataState.createStore({
  global: { // 全局状态
    userInfo: {
      name:'当前登录人'
    }
  },
  local: { // 局部状态
    // 数据列表,使用前需要先注册
    dataListState() { // 显示博文列表用的状态
      return {
        findKind: {}, // 查询方式
        find: {}, // 查询关键字
        page: { // 分页参数
          pageTotal: 100,
          pageSize: 2,
          pageIndex: 1,
          orderBy: { id: false }
        },
        _query: {}, // 缓存的查询条件
        isReload: false // 重新加载数据,需要统计总数
      }
    }
  },
  // 可以给全局状态设置初始状态,可以是异步操作
  init(state) {
    setTimeout(() => {
      state.blogState.name = 'int里面设置的数据,可以异步'
    },3000)
  }
}) 
  • global
    全局状态,每一个状态都必须是对象(包含数组)的形式,不能是基础类型。
    全局状态,会默认注入到根 app 里面。
    状态名称、属性名称可以随意,这里只是举个例子。

  • local
    局部状态,每个状态也必须是对象形式,不会默认注入,需要在父组件里面使用 reg 调用函数才能注入。
    需要使用 return 的形式,原理和 data 一样。Vuex 模块里的 state 也是需要用 return 形式的。
    状态名称、属性名称可以随意,这里只是举个例子。

  • init
    初始化全局状态的函数,可以不设置。
    在main.js里面安装插件时,注入全局状态后 init会被调用,这时候可以给全局状态赋值,支持异步操作。

在main.js 里面使用

这个就和 Vuex 一样了:
main.js

import { createApp } from 'vue'
import store from './store-ds' // 轻量级状态

createApp(App)
  .use(store) // 轻量级状态

后续会在个人博客里面试用一下,具体使用的时候,才会发现有没有问题,以及如何改进。

FAQ

  • 传说中的跟踪呢?
    关于跟踪的问题,一直理解的不深刻,因为dev-tool总是安装不上,后来好不容易安装上了,却不工作。所以暂时跳过这个功能。

  • Vuex支持插件,你的这个呢?
    这个说起来有点复杂,简单的说,目前还没有这样的需求,所以就先跳过了,以后需要的话,可以再加嘛。
    要做插件的话也简单,用 watch 对状态做深度监听,然后调用插件钩子就行。
    要不然我为啥要把状态拆开做reactive呢?

  • 不是说不让直接修改状态吗?
    关于这一点也是比较复杂。
    我可以把状态做成只读的,readonlyReactive一下就行,然后再设计 类似 mutations 的方法 来修改状态。
    但是这么做的意义到底是什么呢?
    没有实现跟踪功能,也没用插件,也不知道怎么弄到dev-tool里面去。
    这些都是配套工程,如果没有这些配套工程,只是做一个只读的话,总是感觉怪怪的。

  • 为啥要弄个局部状态?
    这个要从一次讨论说起。
    某天和知乎大神聊天,他说要做一个模块内的共享状态,一开始我还不理解,讨论了半天,感觉大神说的确实在理。
    于是慢慢开始尝试,最后发现确实挺香的。具体的会在后面的博客项目里面介绍。

  • 支持 option API吗?
    一开始忘记这个事了,后来才想起来,因为是专门针对composition API来设计的,所以应该是不支持的吧。

源码

https://gitee.com/naturefw/vue-data-state
自然框架/vue-data-state

在线演示

https://naturefw.gitee.io/vue-data-state/

2