Elux项目快速上手
快速上手三步曲:
- 划分微模块
- 创建微模块
- 创建Model
- 创建View
- 导出模块
- 引入微模块
新建一个微模块
假设我们想创建一个新Module:
article
在
src/modules/
下面新建一个文件夹article
在
src/modules/article
下面新建一个文件model.ts
在
model.ts
中定义业务模型Model,例如://定义本模块的ModuleState export interface ModuleState { listSearch: ListSearch; //用来记录列表搜索条件 list?: ListItem[]; //用来记录列表 } //定义要从路由中提取的信息 interface RouteParams { listSearch: ListSearch; } export class Model extends BaseModel<ModuleState, APPState> { //尽量避免使用public方法,所以构建this.privateActions来引用私有actions protected privateActions = this.getPrivateActions({putList: this.putList}); //实现路由中提取信息 protected getRouteParams(): RouteParams { const listSearch = queryString.parse(this.getRouter().location.search) return {listSearch}; } //module被Mount的时候会触发此钩子 //在此钩子中必需完成ModuleState初始化,可以异步 public onMount(): void { const {listSearch} = this.getRouteParams(); //完成ModuleState初始化 //_initState是内置的注入初始State的reducer/mutation this.dispatch(this.privateActions._initState({listSearch})); //发起列表查询 this.dispatch(this.actions.fetchList(listSearch)); } //定义一个reducer/mutation,用来更新列表 @reducer protected putList(listSearch: ListSearch, list: ListItem[]) { //如果是vue,可以直接修改state this.state.listSearch = listSearch; this.state.list = list; //如果是React,需要返回一个新对象 //return {...this.state, listSearch, list} } //定义一个effect/action,用来执行列表查询 @effect() public async fetchList(listSearch: ListSearch) { const {list} = await api.getList(listSearch); this.dispatch(this.privateActions.putList(listSearch, list)); } }
在
src/modules/article
下面新建一个文件views
在
src/modules/article/views
下面建立并编写View
,就是React/Vue的Component
在
src/modules/article
下面新建一个文件index.ts
//封装并导出本模块 import {exportModule} from '@elux/vue-web'; import {Model} from './model'; import main from './views/Main'; export default exportModule('article', Model, {main});
打开
src/Project.ts
,import新Moduleexport const ModuleGetter = { stage: () => stage, //通常stage为根模块,使用同步加载 article: () => import('@/modules/article'), };
完成收工