1.1.4 • Published 12 months ago
react-vue-state v1.1.4
react-vue-state
react 状态管理,使用方式类似于 vue 的状态管理
English · 简体中文
安装
npm install react-vue-state
快速使用
import { createStore, useStore } from "react-vue-state";
const store = createStore({
data: {
count: 22,
},
});
export default function () {
const { count, setData } = useStore(store);
return (
<div>
<div>{count}</div>
<button
onClick={() => {
setData({ count: count + 1 });
}}
>
add
</button>
</div>
);
}
详情
import { createStore, useStore, useFunc, Config } from "react-vue-state";
/**
* 覆盖全局的错误处理
* error 具体错误信息
* funcName 发生错误的函数名称
* kind 在computed,methods,watch,setData那个中发生的错误
*/
Config.onError = (error: any) => {
console.log(error);
// do something
};
/**
* createStore(base,ext)
* base = { data:{}; computed:{}; }
* ext = { methods:{}; watch:{}; }
* 为什么要分成2个参数:
* 比起合成一个参数,分成2个参数可以拥有有更好typescript类型推导和ide类型提示
*/
const store = createStore(
{
/**
* 用来存储状态
* 状态发生变化相应的ui就会重新渲染
*/
data: {
firstName: "Li",
lastName: "Hua",
},
/**
* 计算属性
* 他的this是data
* 不能使用箭头函数
* 当函数内中用到的data的状态发生变化时,就会重新计算出新的值
* 这个不是每次都计算而是当使用到的时候才会计算
*/
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
},
},
},
{
/**
* 存放方法 类似于action 用来修改data状态
* 他的this是 data,computed,methods 以及 setData()
* 分成同步方和异步方法
* 要修改data的状态只能通过 this.setData() 来修改
* 异步方法会产生一个 [key]Running 的状态属性 用来通知 执行开始和结束
*/
methods: {
syncFunc() {
const firstName = `${this.firstName} (^_^)`;
this.setData({ firstName });
},
async asyncFunc() {
// 做一些 异步 任务
// 类似 网络请求
const firstName = `${this.firstName} (^_^)`;
this.setData({ firstName });
},
},
/**
* 当data和computed状态发生变化执行
* 他的this是 data,computed,methods 以及 setData()
*/
watch: {
firstName(newValue, oldValue) {
// do something
},
async fullName(newValue, oldValue) {
// do something
},
},
}
);
export default function () {
/**
* useStore
* 只能解构 要用到的值
* 不能 const obj = useStore(store); 通过 obj.xxx 使用
* 不同的组件引用不同的状态
* 只有当状态发生变化 引用的组件才会重新render
* 列:A组件引用状态X B组件引用状态Y
* 当Y状态变化的时候只有B组件render
* 虽然他们 useStore 了同一个 store
*/
const {
firstName,
lastName,
fullName,
asyncFunc,
asyncFuncRunning,
setData,
} = useStore(store);
/**
* 任何函数在运行时都可能会产生错误
* useFunc不仅可以捕获错误还能保证组件在ReRender后地址不会发生改变
*/
const task = useFunc(async () => {
await asyncFunc();
});
return (
<div>
<div>asyncFuncRunning:{`${asyncFuncRunning}`}</div>
<div>firstName:{firstName}</div>
<div>lastName:{lastName}</div>
<div>fullName:{fullName}</div>
<button
onClick={() => {
setData({ firstName: "Yang" });
}}
>
setData 1
</button>
<button
onClick={() => {
setData(({ firstName }) => ({ firstName: firstName + "Yang" }));
}}
>
setData 2
</button>
<button
onClick={() => {
task();
}}
>
test
</button>
</div>
);
}