美文网首页看前端优质文章笔记Vue.js前端
制作一个轻量级的状态管理插件:Vue-data-state

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

作者: 自然框架 | 来源:发表于2021-04-26 18:38 被阅读0次

    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

    在线演示

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

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/bxgerltx.html