一开始学习了一下 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 的 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等。
而我自己做的状态管理,满足自己的需求即可,所以可以更简洁,当然可能无法满足你的需求。
可以不重复制造轮子,但是要拥有制造轮子的能力。做一个状态管理,可以培养这种能力。