源码
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的方式来修改状态。
