# nf-state-轻量级状态管理
**Repository Path**: ycbd/nf-rollup-state
## Basic Information
- **Project Name**: nf-state-轻量级状态管理
- **Description**: vite + vue3 做一个轻量级的状态管理。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 8
- **Created**: 2023-06-05
- **Last Updated**: 2023-06-05
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# nf-state 轻量级状态管理
> 源码：https://gitee.com/naturefw-code/nf-rollup-state
## 介绍
Vue3 的轻量级的状态管理。
简称：nf-state
基于 reactive， 完全发挥 composition API 的特点，简单快捷，好用。
参考了一下 Vuex 和 Pinia，去掉了自己不需要的功能，以及不喜欢的方式，按照个人喜好设计需要的功能。
* 全局状态，用法和 Vuex 类似。
* 局部状态，用法参考 pinia。（pinia是全局状态）
* 初始化，可以对全局状态进行初始化赋值。
## 技术栈
* vite4
* Vue3 （composition API）
## 介绍
1. [基类：实现辅助功能](https://juejin.cn/post/7236196670278549565)
2. [继承：充血实体类](https://juejin.cn/post/7236940669066330171)
3. [继承：OptionApi 风格的状态](https://juejin.cn/post/7236988255073681463)
4. [Model：正确的打开方式](https://juejin.cn/post/7237375391130992700)
5. [组合：setup 风格，更灵活](https://juejin.cn/post/7237426124669665337/)
6. [注册状态的方法、以及局部状态和全局状态](https://juejin.cn/post/7237697495110189116)
7. [实践：当前登录用户的状态](https://juejin.cn/post/7238406406944243749)
8. [实践：列表页面需要的状态](https://juejin.cn/post/7239267216804839479/)
## 目录结构
* lib 状态管理的源码
* src 状态管理的使用demo
* distp 在线演示的代码
## 源码
https://gitee.com/naturefw-code/nf-rollup-state
[](https://gitee.com/naturefw-code/nf-rollup-state)
## 在线演示
https://naturefw-code.gitee.io/nf-rollup-state/
## 在线文档
https://nfpress.gitee.io/doc-nf-state
## 安装教程
npm i @naturefw/nf-state
或者
yarn add @naturefw/nf-state
## 使用说明
1. createStore 创建实例，定义全局状态和初始化函数。
```js
// store/index.js
// 加载状态的类库
import { createStore } from '@naturefw/nf-state'
const testPromie = () => {
return new Promise((fun) => {
setTimeout(() => {
fun('模拟异步设置的。')
}, 500)
})
}
/**
* 统一注册全局状态
*/
export default createStore({
// 读写状态，直接使用 reactive
store: {
// 纯 state
user: {
isLogin: false,
name: 'jyk', //
age: 19,
roles: []
},
// 有 getters、actions
userCenter: {
state: {
name: '',
age: 12
},
getters: {
userName () {
return this.name + '---- 测试 getter'
}
},
actions: {
async loadData() {
this.name = await testPromie()
}
},
options: {
isLog: true // true：做记录；false：不用做记录（默认属性）；
}
}
},
// 可以给全局状态设置初始状态，同步数据可以直接在上面设置，如果是异步数据，可以在这里设置。
init (store) {
}
})
```
2. main.js 挂载到 app
```js
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store-nf' // 轻量级状态
createApp(App)
.use(store) // 加载状态，调用 init 执行初始化函数。
.mount('#app')
```
3. 模板里可以用 $state 访问全局状态。
```html
全局状态-user：{{$state.user1}}
```
> 目前只支持全局状态，局部状态需要先在代码里面获取，然后返回给模板。
4. 在组件里获取状态。
```js
import { useStore } from '@naturefw/nf-state'
const state = useStore('userCenter')
console.log('userCenter', state)
```
基本用法就是这些了，其他的就是各种灵活应用。