"use strict";(self.webpackChunkfes_js=self.webpackChunkfes_js||[]).push([[925],{1371:(n,s,a)=>{a.r(s),a.d(s,{data:()=>p});const p={key:"v-3c4e521e",path:"/reference/plugin/plugins/model.html",title:"@fesjs/plugin-model",lang:"zh-CN",frontmatter:{},excerpt:"",headers:[{level:2,title:"启用方式",slug:"启用方式",children:[]},{level:2,title:"介绍",slug:"介绍",children:[{level:3,title:"Model 文件",slug:"model-文件",children:[]},{level:3,title:"在组件中使用 Model",slug:"在组件中使用-model",children:[]},{level:3,title:"@@initialState",slug:"initialstate",children:[]}]},{level:2,title:"API",slug:"api",children:[{level:3,title:"useModel",slug:"usemodel",children:[]}]}],filePathRelative:"reference/plugin/plugins/model.md",git:{updatedTime:165345025e4,contributors:[{name:"wanchun",email:"445436867@qq.com",commits:1}]}}},7746:(n,s,a)=>{a.r(s),a.d(s,{default:()=>t});const p=(0,a(6252).uE)('

@fesjs/plugin-model

启用方式

在 package.json 中引入依赖：

{\n    "dependencies": {\n        "@fesjs/fes": "^2.0.0",\n        "@fesjs/plugin-model": "^2.0.0"\n    },\n}\n

1
2
3
4
5
6

介绍

一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新，提供 reactive 、 ref 等API把数据变成响应式的。我们使用Provide / Inject特性，在应用实例中共享响应式数据。

我们约定src/models 目录下的文件为项目定义的 model 文件。每个文件需要默认导出一个 function。

文件名则对应最终 model 的 name，你可以通过插件提供的 API 来消费 model 中的数据。

Model 文件

src/models/useAuthModel.js

import { reactive } from 'vue'\n\nexport default function useAuthModel() {\n  const user = reactive({});\n\n  const signin = ()=>{\n      // todo\n  }\n\n  const signout = ()=>{\n      // todo\n  }\n\n  return {\n    user,\n    signin,\n    signout\n  }\n}\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在组件中使用 Model

<script>\nimport { useModel } from "@fesjs/fes"\nexport default {\n    setup(){\n        const { user, signin, signout } = useModel("useAuthModel")\n    }\n}\n</script>\n

1
2
3
4
5
6
7
8

@@initialState

在beforeRender的返回的内容会写入@@initialState

export const beforeRender = {\n    loading: <PageLoading />,\n    action() {\n        const { setRole } = access;\n        return new Promise((resolve) => {\n            setTimeout(() => {\n                setRole('admin');\n                // 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件\n                resolve({\n                    userName: 'harrywan'\n                });\n            }, 1000);\n        });\n    }\n};\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

然后我们可以在其他组件中使用：

<template>\n    <div class="right">{{initialState.userName}}</div>\n</template>\n<script>\nimport { useModel } from '@fesjs/fes';\n\nexport default {\n    setup() {\n        const initialState = useModel('@@initialState');\n        return {\n            initialState\n        };\n    }\n};\n</script>\n<style scope>\n</style>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

API

useModel

useModel(name)

类型：函数
详情: 获取 Model 数据，\b也就是 Model 文件默认导出函数执行的结果。
参数：
- name，传入 Model 文件名

',22),e={},t=(0,a(3744).Z)(e,[["render",function(n,s){return p}]])},3744:(n,s)=>{s.Z=(n,s)=>{const a=n.__vccOpts||n;for(const[n,p]of s)a[n]=p;return a}}}]);

# @fesjs/plugin-model

# 启用方式

# 介绍

# Model 文件

# 在组件中使用 Model

# @@initialState

# API

# useModel