结合 Vuex 和 Pinia 做一个适合自己的状态管理 nf-state

this.dataList.$state = {xxx}

// 依次设置属性值：
this.pagerInfo.count = list.allCount === 0 ? 1 : list.allCount
this.pagerInfo.pagerIndex = 1

// 使用 $patch 设置属性值：
this.pagerInfo.$patch({
  count: list.allCount === 0 ? 1 : list.allCount,
  pagerIndex: 1
})

// 定义全局状态
import { createStore } from '@naturefw/nf-state'

/* 模拟异步操作 */
const testPromie = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const re = {
        name: '异步的方式设置name'
      }
      resolve(re)
    }, 500)
  })
}

/**
 * 统一注册全局状态。key 相当于  defineStore 的第一个参数（id）
 */
export default createStore({
  // 定义状态，会变成 reactive 的形式。store 里面是各种状态
  store: {
    // 如果只有 state，那么可以简化为一个对象的方式。
    user: {
      isLogin: false,
      name: 'jyk', //
      age: 19,
      roles: []
    },
    // 有 getters、actions
    userCenter: {
      state: {
        name: '',
        age: 12,
        list: []
      },
      getters: {
        userName () {
          return this.name + '---- 测试 getter'
        }
      },
      actions: {
        async loadData(val, state) {
          const foo = await testPromie()
          state.name = foo.name
          this.name = foo.name
          this.$state = foo
          this.$patch(foo)
        }
      },
      options: {
        isLocal: false, // true：局部状态；false：全局状态（默认属性）；
        isLog: true, // true：做记录；false：不用做记录（默认属性）；
        /**
         * 1：宽松，可以各种方式改变属性，适合弹窗、抽屉、多tab切换等。
         * 2：一般，不能通过属性直接改状态，只能通过内置函数、action 改变状态
         * 3：严格，不能通过属性、内置函数改状态，只能通过 action 改变状态
         * 4：超严，只能在指定组件内改变状态，比如当前用户的状态，只能在登录组件改，其他组件完全只读！
        */
        level: 1
      }
    },
    // 数组的情况
    dataList: [123] 
  },
  // 状态初始化，可以给全局状态设置初始状态，支持异步。
  init (store) {
      // 可以从后端API、indexedDB、webSQL等，设置状态的初始值。
  }
})

import { createApp } from 'vue'
import App from './App.vue'

import store from './store'

createApp(App)
  .use(store)
  .mount('#app')

  import { store } from '@naturefw/nf-state'

  const { user, userCenter } = store

import { defineStore } from '@naturefw/nf-state'

const flag = Symbol('UserInfo')
// const flag = 'UserInfo'

const getUserInfo = () => defineStore(flag, {
  state: {
    name: '客户管理',
    info: {}
  },
  getters: {
  },
  actions: {
    updateName(val) {
      this.name = val
    }
  }
})

export {
  flag,
  getUserInfo
}

import { watch } from 'vue'

import { defineStore, useStore, store } from '@naturefw/nf-state'

const flag = Symbol('pager001')
// const flag = 'pager001'

/**
 * 注册局部状态，父组件使用 provide 
 * * 数据列表用
 * @returns
 */
const regListState = () => {
  // 定义 列表用的状态
  const state = defineStore(flag, {
    state: () => {
      return {
        moduleId: 0, // 模块ID
        dataList: [], // 数据列表
        findValue: {}, // 查询条件的精简形式
        findArray: [], // 查询条件的对象形式
        pagerInfo: { // 分页信息
          pagerSize: 5,
          count: 20, // 总数
          pagerIndex: 1 // 当前页号
        },
        selection: { // 列表里选择的记录
          dataId: '', // 单选ID number 、string
          row: {}, // 单选的数据对象 {}
          dataIds: [], // 多选ID []
          rows: [] // 多选的数据对象 []
        },
        query: {} // 查询条件
      }
    },
    actions: {
      /**
       * 加载数据，
       * @param {*} isReset true：需要设置总数，页号设置为1；false：仅翻页
       */
      async loadData (isReset = false) {
        // 获取列表数据
        const list = await xxx
        // 使用 $state 直接赋值
        this.dataList.$state = list.dataList
        if (isReset) {
          this.pagerInfo.$patch({
            count: list.allCount === 0 ? 1 : list.allCount,
            pagerIndex: 1
          })
        }
      }
    }
  },
  { isLocal: true } // 设置为局部状态，没有设置的话，就是全局状态了。
  )

  // 初始化
  state.loadData(true)

  // 监听页号，实现翻页功能
  watch(() => state.pagerInfo.pagerIndex, (index) => {
    state.loadData()
  })

  // 监听查询条件，实现查询功能。
  watch(state.findValue, () => {
    state.loadData(true)
  })

  return state
}

/**
 * 子组件用 inject 获取状态
 * @returns
 */
const getListState = () => {
  return useStore(flag)
}

export {
  getListState,
  regListState
}

  // 引入
  import { regListState } from './controller/state-list.js'

  // 注册状态
  const state = regListState()

  // 局部状态
  import { getListState } from '../controller/state-list.js'

  // 获取父组件提供的局部状态
  const state = getListState()