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

一开始学习了一下 Vuex，感觉比较冗余，就自己做了一个轻量级的状态管理。

后来又学习了 Pinia，于是参考 Pinia 改进了一下自己的状态管理。

结合 Vuex 和 Pinia， 保留需要的功能，去掉不需要的功能，修改一下看着不习惯的使用方法，最后得到了一个满足自己需要的轻量级状态管理 —— nf - state。

设计思路

还是喜欢 MVC设计模式，状态可以看做 M，组件是V，可以用 controller 做调度，需要访问后端的话，可以做一个 services。这样整体结构比较清晰明了。

当然简单的状态不需要 controller，直接使用 getters、actions 即可。整体结构如下：

源码

https://gitee.com/naturefw-code/nf-rollup-state

在线演示

https://naturefw-code.gitee.io/nf-rollup-state/

在线文档

https://nfpress.gitee.io/doc-nf-state

优点

• 支持全局状态和局部状态；
• 可以像 Vuex 那样，用 createStore 统一注册全局状态 ；
• 也可以像 Pinia 那样，用 defineStore 分散定义全局状态和局部状态；
• 根据不同的场景需求，选择适合的状态变更方式（安全等级）；
• 可以和 Vuex、Pinia 共存；
• 数据部分和操作部分“分级”存放，便于遍历；
• 状态采用 reactive 形式，可以直接使用 watch、toRefs 等；
• 更轻、更小、更简洁；
• 可以记录变化日志，也可以不记录；
• 封装了对象、数组的一些方法，使用 reactive 的时候可以“直接”赋值。

缺点

• 不支持 option API、vue2；
• 暂时不支持 TypeScript；
• 暂时不支持 vue-devtool；
• 不支持SSR；
• 只有一个简单的状态变化记录（默认不记录）。

nf-state 的结构

• state：支持对象、函数的形式。
• getters：会变成 computed，不支持异步（其实也可以用异步）。
• actions：变更状态，支持异步。
• 内置函数：
  • $state：整体赋值。
  • $patch：修改部分属性，支持深层。
  • $reset：重置。

本来想只保留 state 即可，但是看看 Pinia，感觉加上 getter、action 也不是不行，另外也参考 Pinia 设置了几个内置函数。

内置函数

reactive 哪都好，就是不能直接赋值，否则就会失去响应性，虽然有办法解决，但是需要多写几行代码，所以我们可以封装一下。好吧，是看到 Pinia 的 $state、$patch 后想到的。

$state

可以直接整体赋值，支持 object 和 数组。直接赋值即可，这样用起来就方便多了。

this.dataList.$state = {xxx}

$patch

修改部分属性。我们可以直接改状态的属性值，但是如果一次改多个的话，就有一点点麻烦，用$patch可以整洁一点。

// 依次设置属性值：
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
})

支持深层属性。

全局状态的使用方式

全局状态有两种定义方式：

• 像 Vuex 那样，在 main.js 里面统一注册；
• 像 Pinia 那样，在组件里面定义。

在 main.js 里面统一注册全局状态

nf-state 的全局状态的使用方法和 Vuex 差不多，先创建一个 js文件，定义一个或者多个状态，然后在main.js里面挂载。

优点：可以统一注册、便于管理，一个项目里有哪些全局状态，可以一目了然。

• /store/index.js

// 定义全局状态
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等，设置状态的初始值。
  }
})

• main.js

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

import store from './store'

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

在组件里获取统一注册的全局状态

使用方法和 Vuex 类似，直接获取全局状态：

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

  const { user, userCenter } = store

在组件里注册全局状态

这种方式，借鉴了Pinia的方式，我们可以建立一个 js 文件，然后定义一个状态，可以用Symbol 作为标志，这样可以更方便的避免重名。（当然也可以用 string）

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
}

虽然使用 Symbol 可以方便的避免重名，但是获取状态的时候有点小麻烦。

ID（状态标识）支持 string 和 Symbol ，大家可以根据自己的情况选择适合的方式。

在组件里面引入 这个js文件，然后可以通过 getUserInfo 函数获取状态，可以用统一注册的全局状态的方式获取。

使用局部状态

基于 provide/inject 设置了局部状态。

有时候，一个状态并不是整个项目都需要访问，这时候可以采用局部状态，比如列表页面里的状态。

定义一个局部状态

我们可以建立一个js文件，定义状态：

• state-list.js

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
}

是不是应该把 watch 也内置了？

在父组件引入局部状态

建立父组件，使用 getListState 引入局部状态：

• data-list.vue

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

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

调用 getListState() 会用 provide 设置一个状态。

在子组件里获取局部状态

建立子组件，获取局部状态：

• pager.vue

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

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

调用 getListState()， 内部会用 inject （注入）获取父组件的局部状态。这样使用起来就比较明确，也比较简单。

子组件也可以调用 regListState ，这样可以注册一个子组件的状态，子子组件只能获取子组件的状态。

子子组件如果想获取父组件的状态，那么需要设置不同的ID。

安全等级

变更状态可以有四个安全级别：宽松、一般、严格、超严。

安全级别	state类型	直接改属性	内置函数	action	范围	举例
宽松	reactive				所有组件	弹窗、抽屉的状态
一般	readonly	✘			所有组件
严格	readonly	✘	✘		所有组件
超严	readonly	✘			特定组件才可更改	当前用户状态

• 宽松：任何组件里都可以通过属性、内置函数和 action 来更改状态。
  
  比如弹窗状态（是否打开）、抽屉状态（是否打开）、tab标签的切换等。
  
  这些场景里，如果可以直接修改属性的话，那么可以让代码更简洁。

• 一般和严格：二者主要区别是，内置函数是否可以使用的问题，其实一开始不想区分的，但是想想还是先分开的话，毕竟多提供了一个选择。

• 超严：只能在特定的组件里改变状态，其他组件只能读取状态。
  
  比如当前访问者的状态，只有在登录组件、退出组件里改变，其他组件不能更改。

这样可以更好的适应不同的场景需求。

和 Pinia 的区别

nf-state 看起来和 Pnina 挺像的，那么有哪些区别呢？

局部状态

Pinia 都是 全局状态，没有局部状态，或者说，局部状态比较简单，似乎不用特殊处理，只是，既然都封装了，那么就做全套吧，统一封装，统一使用风格。

状态的结构

虽然都是 reactive 的形式，但是内部结构的层次不一样。

pinia 的状态，数据部分和操作部分都在一个层级里面，感觉有点分布清楚，所以 pinia 提供了 来实现 toRefs 的功能。

我还是喜欢那种层次分明的形式，比如这样：

这样设计层次很清晰，可以直接使用 toRefs 实现解构，而不会解构出来“不需要”的方法。

支持的功能

官方提供的状态管理需要满足各种需求，所以要支持 option API、vue2、TypeScript等。

而我自己做的状态管理，满足自己的需求即可，所以可以更简洁，当然可能无法满足你的需求。

可以不重复制造轮子，但是要拥有制造轮子的能力。做一个状态管理，可以培养这种能力。