vue3轻量级状态（nf-state）的设计思路和使用思路

源码

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

在线演示

https://naturefw.gitee.io/vite2-vue3-demo/

安装

npm i nf-state
or
yarn add nf-state

技术栈

• vue3
• compositionAPI

不支持vue2、TypeScript、vue-devTools

特点

• 轻量级：全部源码只有一百行左右。
• 简单方便：相当于大号 reactive 的使用方式。
• 可以跟踪状态：记录日志，代码定位，监听，插件，初始化
• 其他

和 Vuex、pinia 做一下比较

有网友问我，和Vuex4、Vuex5（预览版）、pinia的区别。

之前一直研究Vuex4和实现自己的想法，Vuex5只是听说还不知道啥样的，pinia也没有留意。

但是问到了，那么就需要去了解一下，顺便学习一下先进经验。

网上找了一下，资料比较少，只有一个对比介绍，B站还有一个视频介绍，看了之后确实有所收获。

我想最大的区别就是设计思路的区别吧。

• Vuex4：我的我的全是我的，getter、mutation、action、module等都要做到Vuex的内部。

• Vuex5：不要那么多了，只留下mutation、action即可，其他的自行处理。（如果理解有误，还请多多批评）

• pinia：轻量级（打包后1KB）、灵活注册，也不要那么多，留几个主要的即可。（同上）

• nf-state：借鉴MVC的思路，状态管理本身只负责状态和跟踪，其他的操作交给controller处理，不用包括在状态管理内部。组件可以直接获取状态，也可以通过controller来操作状态。

nf-state 的设计思路

状态管理设计思路

状态管理负责的

状态管理本身，只负责状态的注册和跟踪，其他的操作都交给controller，controller可以按照模块或者功能点来划分，这样更易于维护。

状态的分类

按使用范围划分:

• 全局状态
• 局部状态

按特点划分：

• 普通状态：直接使用reactive
• 只读状态：readonly套reactive
• 跟踪状态：proxy套reactive

如何实现跟踪

使用proxy的set，对状态的修改进行拦截，这样就可以实现记录状态变化的日志、监听/拦截状态的变化、设置钩子实现插件、持久化等功能，最后可以定位到改变状态的代码的位置（组件名称、函数名称、代码行列数、修改时间等）

controller负责的

controller 实现状态的具体操作方式，比如用户状态需要的用户登录、用户退出等具体的操作。

相当于把 Vuex 的getter、action、module拿出来单独处理，利用 compositionAPI 的灵活性，更便于维护和复用。

组件负责的

• 组件的模板
  在模板里面可以直接使用$state.xxx来读取状态

• 代码
  代码里可以通过 import 的方式引入状态，然后可以直接读取状态。
  如果是简单情况，可以直接修改状态；
  如果是复杂情况，可以通过controller来操作状态。

因为状态管理内部，可以使用proxy的set对状态的改变进行跟踪，也可以设置监听和钩子，想当然自带mutation功能，所以我们可以不必通过mutation的方式来修改状态。