跳转到主文档

Model 介绍

Modern.js 中引入 Model 的概念作为应用状态管理模型。Model 用来封装业务数据和数据处理方法,在代码组织上与 View(视图)分离。

Modern.js 的 Model 基于 Redux 实现,提供更高层级的抽象,并完全兼容 Redux 生态。

下来我们以一个基础的 countModel 为例,演示如何创建一个 Model:

import { model } from '@modern-js/runtime/model';

const countModel = model("count").define({
state: {
value: 1
},
actions: {
add(state) {
return {
...state,
value: state.value + 1
};
}
}
});

export default countModel;

我们使用 model 函数创建了一个名为 count 的 Model,Model 里定义了 stateactions

  • state 表示计数器状态,它是业务逻辑相关的数据。
  • actions 里可以添加更新状态的纯函数,它是对数据的处理方法。它接收当前的状态 state 作为入参,返回一个新的状态。

以 Mutable 方式更新 State

上述的 add 函数是一个纯函数,不直接更新 state,而是返回新的对象。这就保证了 Model 的 stateImmutable 的。 Modern.js 默认也支持了以 Mutable 的方式操作 state(基于 Immer 实现)。

如下可以把 add 函数改造成 Mutable 方式操作 state

import { model } from '@modern-js/runtime/model';

const countModel = model("count").define({
state: {
value: 1
},
actions: {
add(state) {
state += 1;
}
}
});

export default countModel;

上面就是 Model 的创建,你可能还想了解:如何使用 Model

补充信息

相关 API 的更多介绍,请参考这里