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

// 模仿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 // 子组件里面获取状态
    }
  }
}
复制代码

import VueDS from 'vue-data-state' 
const { state, reg, get } = VueDS.useStore()
state // 全局状态
// 父组件注入状态，并且返回局部状态，以便父组件使用
const 局部状态 = reg.局部状态名称()
// 子组件获取局部状态
const 局部状态 = get.局部状态名称()
复制代码

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)
  }
}) 
复制代码

import { createApp } from 'vue'
import store from './store-ds' // 轻量级状态
createApp(App)
  .use(store) // 轻量级状态
复制代码