一个无框架依赖、非集中式的状态管理
- 支持单独多处引入
- 可以接收外部参数（仅第一次传入有效）
- 状态不需要作为参数传递
注：框架支持，可在编写
自定义Model时，手动支持（见下文Vue 的响应式支持）
自定义 model 的包装器
限制(Typescript 类型)自定义 model 返回值需要有 state，同时获取返回值，方便使用时候的取值类型推导
使用 自定义Model 时传入的外部参数
注意：props 只会在第一次传入的时候生效
// 第一次传入是 { a: 'a' }
const countModel = useCountModel({ a: 'a' });
// 第二次传入，无效，此时 useCountModel 内部的props参数仍然是第一次传入的 { a: 'a' }
const countModel2 = useCountModel({ a: 'aaaa' });自定义 model 在 setState 的时候调用
参数 params:
{ key: string, value: any, params?: any }
仅允许通过这种方式更新
state，外部直接修改state无效
自定义监听 onChange 的回调
需要在自定义
model内setState的时候调用一次onChange方法
参数 params
- callback:
({ key: string, value: any, params?: any }): void; - deps:
string[]
const countModel = useCountModel();
console.log(countModel.state.count); // 0
// 调用下面 setCount 之后执行回调函数
useCountModel.onStateChange(
({ key, value }) => {
console.log(key, value); // 'count', 6
},
['count']
);
countModel.setCount(6);
console.log(countModel.state.count); // 6
console.log(useCountModel.data.state.count); // 6建议将自定义 model 写在
createModel里面，这样使用Typescript时回调函数会有类型; 见src/_example/useTestModel.ts
// __test/useCountModel.js
const zrModel = require('../dist/state-model.umd.js');
const { createModel } = zrModel;
/**
* useCountModel
* @param {*} param0
* @returns
*/
module.exports = createModel(function useCountModel({ props, onChange }) {
const state = {
count: 0,
};
console.log(props);
function setCount(newCount) {
onChange({ key: 'count', value: newCount });
}
return {
state,
setCount,
};
});- 正常引用:
testModel.state - 特殊引用:
useTestModel.data.state
import useTestModel from './useTestModel';
const testModel = useTestModel();
// 正常引用
console.log(testModel.state.count); // 0
// 不需要执行 `useTestModel()` 时引用
console.log(useTestModel.data.state.count); // 0
testModel.setCount(6);
testModel.state.count = 8; // 无效
console.log(testModel.state.count); // 6
console.log(useTestModel.data.state.count); // 6编写自定义model时候，使用框架提供的相应的响应式方法
-
[
Vue2.6+] Vue.observable ：让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。 -
[
Vue3.x+] Vue.reactive：返回对象的响应式副本
例：
function useCountModel({ onChange }) {
const state = {
count: 0,
};
function setCount(count) {
onChange('count', count);
}
// 如在setCount之后，外部引用state.count的地方就会响应式更新了
Vue.observable(state);
return {
state,
setCount,
};
}TODO，不清楚有没有类似上面 Vue 的外部响应式支持。。。
TODO，不清楚有没有类似上面 Vue 的外部响应式支持。。。
- hox.js: 基于
React Hooks状态管理器
项目基于 rollup-starter-lib 创建
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent