utquidem
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
120 lines (94 loc) • 2.44 kB
Markdown
---
sidebar_position: 5
---
本章将要介绍如何在可复用模块项目中使用 Runtime API。
可复用模块的初始化项目默认不包含 Runtime API 功能，我们可以通过微生成器来开启它。
可以在项目根目录下执行如下命令运行微生成器：
```
pnpm run new
```
我们按照如下进行选择：
```
? 请选择你想要的操作 启用可选功能
? 启用可选功能 启用「Rumtime API」
```
然后就可以等待依赖安装成功。
在可复用模块项目中，可以直接使用 `@modern-js/runtime` 模块来使用 Runtime API。例如使用了 Model API 的项目，其项目的代码如下：
**`./src/model.tsx`**
``` tsx
import { model } from '@modern-js/runtime/model';
type State = {
data: {
key: string;
name: string;
age: number;
country: string;
}[];
};
export default model<State>('tableList').define({
state: {
data: [],
},
actions: {
load: {
fulfilled(state, payload) {
return {data: payload};
},
}
},
effects: {
async load() {
const data = await (await fetch('https://lf3-static.bytednsdoc.com/obj/eden-cn/beeh7uvzhq/users.json')).json();
return data;
},
},
});
```
**`./src/index.tsx`**
``` tsx
import type React from 'react';
import { useEffect } from 'react';
import { Table } from 'antd';
import { useModel } from '@modern-js/runtime/model';
import tableListModel from './model';
export default () => {
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Country',
dataIndex: 'country',
key: 'country',
},
];
const [{ data }, { load }] = useModel(tableListModel);
useEffect(() => {
load();
}, []);
return (
<div className="table-list table-theme">
<Table columns={columns} dataSource={data} />
</div>
);
};
```
我们既可以把包含 Runtime API 的可复用模块进行构建，然后在一个应用项目内使用来进行调试。
也可以使用可复用模块提供的 Storybook 功能进行调试。例如针对上面的例子，我们可以编写 Story：
``` tsx
import TableList from '@/index';
export const TableListDemo = () => <TableList />;
export default {
title: 'A TableList',
};
```