创建 Model#

上一节的计数器应用中，我们简单演示了如何创建一个 Model。本节我们将详细介绍 Model 的创建方法。

通过 model API 创建 Model，例如，model('foo') 表示要创建一个名为 foo 的 Model，通过调用 model('foo') 返回的 define 函数，定义 Model 包含的 State、Actions 等：

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

const fooModel = model('foo').define({
  state: {
    value: 'foo',
  },
  actions: {
    setValue: (state, payload){
      state.value = payload
    }
  }
});

define 接收的参数，只是对 Model 原始结构的描述：内部定义的 State、Actions 等。define 返回值 fooModel 才是真正创建得到的 Model 对象。例如，虽然 setValue，有 2 个参数，但是当真正调用 setValue 这个 Action 时，我们只需要传入 payload 一个参数，因为我们调用的是 fooModel 上的 Action 方法，而不是 Model 原始结构上描述的 Action 方法。详细参考使用 Model。

define 除了接收对象类型的参数，还可以接收函数类型的参数。例如：

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

const fooModel = model('foo').define((context, utils) => {
  return {
    state: {
      value: 'foo',
    },
    actions: {
      setValue: (state, payload){
        state.value = payload
      }
    }
  }
});

通过函数定义 Model 时，函数内部会自动传入 context、utils 2 个参数，context 是 Reduck 的上下文对象，可以获取到 store 对象，utils 提供了一组工具函数，方便实现 Model 通信等复杂功能需求。

Model 支持复制。例如：

const barModel = fooModel('bar');

barModel 是基于 fooModel 创建出一个的新的 Model 对象，类比面向对象编程语言中的概念，barModel 和 fooModel 是基于同一个类（Class）创建出的 2 个实例对象。当两个模块的状态管理逻辑相同，例如一个页面中的两个 tab 模块，使用的数据的结构和逻辑相同，区别只是从不同的接口获取数据，那么可以通过 Model 复制的方式，创建 2 个不同的 Model 对象。