98 lines
43 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="VuePress 2.0.0-beta.53">
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html, body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('vuepress-color-scheme');
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true);
}
</script>
<link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/logo.png"><title>@fesjs/plugin-model | Fes.js</title><meta name="description" content="一个好用的前端应用解决方案">
<link rel="preload" href="/fes.js/assets/style.2de37a47.css" as="style" /><link rel="stylesheet" href="/fes.js/assets/style.2de37a47.css" />
<link rel="modulepreload" href="/fes.js/assets/app.005e0daf.js"><link rel="modulepreload" href="/fes.js/assets/model.html.3cd49de2.js"><link rel="modulepreload" href="/fes.js/assets/model.html.fab33d63.js"><link rel="prefetch" href="/fes.js/assets/index.html.bc74ee4c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.85db73e3.js" as="script" /><link rel="prefetch" href="/fes.js/assets/builder.html.e970d1bc.js" as="script" /><link rel="prefetch" href="/fes.js/assets/config.html.5d92a440.js" as="script" /><link rel="prefetch" href="/fes.js/assets/contributing.html.24d74808.js" as="script" /><link rel="prefetch" href="/fes.js/assets/css.html.3990f0c1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/directory-structure.html.4960a3b9.js" as="script" /><link rel="prefetch" href="/fes.js/assets/env.html.35aa0f1a.js" as="script" /><link rel="prefetch" href="/fes.js/assets/faq.html.1e599082.js" as="script" /><link rel="prefetch" href="/fes.js/assets/getting-started.html.8eca842e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/image.html.20b52f7d.js" as="script" /><link rel="prefetch" href="/fes.js/assets/mock.html.6d653289.js" as="script" /><link rel="prefetch" href="/fes.js/assets/plugin.html.ccfb9074.js" as="script" /><link rel="prefetch" href="/fes.js/assets/public.html.9d99cf84.js" as="script" /><link rel="prefetch" href="/fes.js/assets/route.html.aa1f3f0b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/runtime-config.html.d036f810.js" as="script" /><link rel="prefetch" href="/fes.js/assets/template.html.decb42ff.js" as="script" /><link rel="prefetch" href="/fes.js/assets/upgrade3.html.0ae06c8e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.20695f57.js" as="script" /><link rel="prefetch" href="/fes.js/assets/cli.html.b37682a1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.35cddc8c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.82e50780.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.74321f46.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.d460e0cc.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.b3f98887.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.b17fa30f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/access.html.701eacb0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/editor.html.2fb88cf1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/enums.html.7c55aefa.js" as="script" /><link rel="prefetch" href="/fes.js/assets/icon.html.d2dc60da.js" as="script" /><link rel="prefetch" href="/fes.js/assets/jest.html.de551700.js" as="script" /><link rel="prefetch" href="/fes.js/assets/layout.html.bccb8e74.js" as="script" /><link rel="prefetch" href="/fes.js/assets/locale.html.4d3b3790.js" as="script" /><link rel="prefetch" href="/fes.js/assets/login.html.2f0338ab.js" as="script" /><link rel="prefetch" href="/fes.js/assets/pinia.html.1e6ca3bb.js" as="script" /><link rel="prefetch" href="/fes.js/assets/qiankun.html.deb33c50.js" as="script" /><link rel="prefetch" href="/fes.js/assets/request.html.fe4ceade.js" as="script" /><link rel="prefetch" href="/fes.js/assets/sass.html.177ef37c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/swc.html.a56bb9f7.js" as="script" /><link rel="prefetch" href="/fes.js/assets/vuex.html.36df398e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/watermark.html.855d80c4.js" as="script" /><link rel="prefetch" href="/fes.js/assets/windicss.html.cc303ad2.js" as="script" /><link rel="prefetch" href="/fes.js/assets/404.html.c3e557d0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.1f2b7059.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.174811be.js" as="script" /><link rel="prefetch" href="/fes.js/assets/builder.html.999bf635.js" as="script" /><link rel="prefetch" href="/fes.js/assets/config.html.3c4760e9.js" as="script" /><link rel="prefetch" href="/fes.js/assets/contributing.html.8cad4b5e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/css.html.a45df14e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/directory-structure.html.15096386.js" as="script" /><link rel="prefetch" href="/fes.js/assets/env.html.805df8a5.js" as="script" /><link rel="prefetch" href="/fes.js/assets/faq.html.f70ba546.js" as="script" /><link rel="prefetch" href="/fes.js/assets/getting-started.html.3b600666.js" as="script" /><link rel="prefetch" href="/fes.js/assets/image.html.58aa17c7.js" as="script" /><link rel="prefetch" href="/fes.js/assets/mock.html.9cef5d45.js" as="script" /><link rel="prefetch" href="/fes.js/assets/plugin.html.0095f814.js" as="script" /><link rel="prefetch" href="/fes.js/assets/public.html.848eef99.js" as="script" /><link rel="prefetch" href="/fes.js/assets/route.html.3d217616.js" as="script" /><link rel="prefetch" href="/fes.js/assets/runtime-config.html.c81fa63e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/template.html.91640404.js" as="script" /><link rel="prefetch" href="/fes.js/assets/upgrade3.html.3629ebda.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.3fadc9c0.js" as="script" /><link rel="prefetch" href="/fes.js/assets/cli.html.768b01bb.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.8a34550e.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.5f811d7d.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.c22810d3.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.7417ac5c.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.html.7e2b22df.js" as="script" /><link rel="prefetch" href="/fes.js/assets/api.html.1aa2bbfa.js" as="script" /><link rel="prefetch" href="/fes.js/assets/access.html.2783c102.js" as="script" /><link rel="prefetch" href="/fes.js/assets/editor.html.604dae94.js" as="script" /><link rel="prefetch" href="/fes.js/assets/enums.html.e894dfd6.js" as="script" /><link rel="prefetch" href="/fes.js/assets/icon.html.c524fb7f.js" as="script" /><link rel="prefetch" href="/fes.js/assets/jest.html.9bcb2ce1.js" as="script" /><link rel="prefetch" href="/fes.js/assets/layout.html.b7ee50eb.js" as="script" /><link rel="prefetch" href="/fes.js/assets/locale.html.c1dcd857.js" as="script" /><link rel="prefetch" href="/fes.js/assets/login.html.0ea4b7ad.js" as="script" /><link rel="prefetch" href="/fes.js/assets/pinia.html.1eb91490.js" as="script" /><link rel="prefetch" href="/fes.js/assets/qiankun.html.b3592391.js" as="script" /><link rel="prefetch" href="/fes.js/assets/request.html.f4de04c7.js" as="script" /><link rel="prefetch" href="/fes.js/assets/sass.html.9338147b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/swc.html.0bd38fed.js" as="script" /><link rel="prefetch" href="/fes.js/assets/vuex.html.6d094802.js" as="script" /><link rel="prefetch" href="/fes.js/assets/watermark.html.1d51b560.js" as="script" /><link rel="prefetch" href="/fes.js/assets/windicss.html.17e40609.js" as="script" /><link rel="prefetch" href="/fes.js/assets/404.html.ef11e76b.js" as="script" /><link rel="prefetch" href="/fes.js/assets/index.0b6f9a66.js" as="script" />
</head>
<body>
<div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/fes.js/" class=""><img class="logo" src="/fes.js/logo.png" alt="Fes.js"><span class="site-name can-hide">Fes.js</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/fes.js/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.5"><span class="title">v3.0.5</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.5"><span class="title">v3.0.5</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><div id="docsearch-container"></div></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/fes.js/guide/" class="" aria-label="指南"><!--[--><!--]--> 指南 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/config/" class="" aria-label="编译时配置"><!--[--><!--]--> 编译时配置 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/api/" class="" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/plugin/" class="router-link-active" aria-label="插件"><!--[--><!--]--> 插件 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/fes.js/reference/cli/" class="" aria-label="CLI"><!--[--><!--]--> CLI <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="v3.0.5"><span class="title">v3.0.5</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="v3.0.5"><span class="title">v3.0.5</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/2.0" rel="noopener noreferrer" target="_blank" aria-label="v2.0"><!--[--><!--]--> v2.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="https://fesjs.mumblefe.cn/1.0" rel="noopener noreferrer" target="_blank" aria-label="v1.0"><!--[--><!--]--> v1.0 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="了解更多"><span class="title">了解更多</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md" rel="noopener noreferrer" target="_blank" aria-label="更新日志"><!--[--><!--]--> 更新日志 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a class="external-link" href="http://fes-design.mumblefe.cn/" rel="noopener noreferrer" target="_blank" aria-label="fes-design"><!--[--><!--]--> fes-design <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a class="external-link" href="https://github.com/WeBankFinTech/fes.js" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><!--[--><!--]--> GitHub <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/fes.js/reference/plugin/" class="router-link-active sidebar-item sidebar-heading" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">Plugins <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/fes.js/reference/plugin/plugins/access.html" class="sidebar-item" aria-label="@fesjs/plugin-access"><!--[--><!--]--> @fesjs/plugin-access <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/enums.html" class="sidebar-item" aria-label="@fesjs/plugin-enums"><!--[--><!--]--> @fesjs/plugin-enums <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/icon.html" class="sidebar-item" aria-label="@fesjs/plugin-icon"><!--[--><!--]--> @fesjs/plugin-icon <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/jest.html" class="sidebar-item" aria-label="@fesjs/plugin-jest"><!--[--><!--]--> @fesjs/plugin-jest <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/layout.html" class="sidebar-item" aria-label="@fesjs/plugin-layout"><!--[--><!--]--> @fesjs/plugin-layout <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/locale.html" class="sidebar-item" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="@fesjs/plugin-model"><!--[--><!--]--> @fesjs/plugin-model <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#启用方式" class="router-link-active router-link-exact-active sidebar-item" aria-label="启用方式"><!--[--><!--]--> 启用方式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#介绍" class="router-link-active router-link-exact-active sidebar-item" aria-label="介绍"><!--[--><!--]--> 介绍 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#model-文件" class="router-link-active router-link-exact-active sidebar-item" aria-label="Model 文件"><!--[--><!--]--> Model 文件 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#在组件中使用-model" class="router-link-active router-link-exact-active sidebar-item" aria-label="在组件中使用 Model"><!--[--><!--]--> 在组件中使用 Model <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#initialstate" class="router-link-active router-link-exact-active sidebar-item" aria-label="@@initialState"><!--[--><!--]--> @@initialState <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#api" class="router-link-active router-link-exact-active sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/fes.js/reference/plugin/plugins/model.html#usemodel" class="router-link-active router-link-exact-active sidebar-item" aria-label="useModel"><!--[--><!--]--> useModel <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><a href="/fes.js/reference/plugin/plugins/request.html" class="sidebar-item" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/vuex.html" class="sidebar-item" aria-label="@fesjs/plugin-vuex"><!--[--><!--]--> @fesjs/plugin-vuex <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/qiankun.html" class="sidebar-item" aria-label="@fesjs/plugin-qiankun"><!--[--><!--]--> @fesjs/plugin-qiankun <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/windicss.html" class="sidebar-item" aria-label="@fesjs/plugin-windicss"><!--[--><!--]--> @fesjs/plugin-windicss <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/sass.html" class="sidebar-item" aria-label="@fesjs/plugin-sass"><!--[--><!--]--> @fesjs/plugin-sass <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/editor.html" class="sidebar-item" aria-label="@fesjs/plugin-monaco-editor"><!--[--><!--]--> @fesjs/plugin-monaco-editor <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/pinia.html" class="sidebar-item" aria-label="@fesjs/plugin-pinia"><!--[--><!--]--> @fesjs/plugin-pinia <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/watermark.html" class="sidebar-item" aria-label="@fesjs/plugin-watermark"><!--[--><!--]--> @fesjs/plugin-watermark <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/login.html" class="sidebar-item" aria-label="@fesjs/plugin-login"><!--[--><!--]--> @fesjs/plugin-login <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/plugins/swc.html" class="sidebar-item" aria-label="@fesjs/plugin-swc"><!--[--><!--]--> @fesjs/plugin-swc <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">插件开发 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/fes.js/reference/plugin/dev/" class="sidebar-item" aria-label="插件介绍"><!--[--><!--]--> 插件介绍 <!--[--><!--]--></a><!----></li><li><a href="/fes.js/reference/plugin/dev/api.html" class="sidebar-item" aria-label="插件 API"><!--[--><!--]--> 插件 API <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="fesjs-plugin-model" tabindex="-1"><a class="header-anchor" href="#fesjs-plugin-model" aria-hidden="true">#</a> @fesjs/plugin-model</h1><h2 id="启用方式" tabindex="-1"><a class="header-anchor" href="#启用方式" aria-hidden="true">#</a> 启用方式</h2><p>在 package.json 中引入依赖:</p><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">&quot;@fesjs/fes&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span><span class="token punctuation">,</span>
<span class="token property">&quot;@fesjs/plugin-model&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.0.0&quot;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动 UI 更新,提供 <code>reactive</code><code>ref</code> 等 API 把数据变成响应式的。我们使用<code>Provide / Inject</code>特性,在应用实例中共享响应式数据。</p><p>我们约定<code>src/models</code> 目录下的文件为项目定义的 <code>model</code> 文件。每个文件需要默认导出一个 <code>function</code></p><p>文件名则对应最终 <code>model</code><code>name</code>,你可以通过插件提供的 <code>API</code> 来消费 <code>model</code> 中的数据。</p><h3 id="model-文件" tabindex="-1"><a class="header-anchor" href="#model-文件" aria-hidden="true">#</a> Model 文件</h3><p><strong>src/models/useAuthModel.js</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">useAuthModel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> user <span class="token operator">=</span> <span class="token function">reactive</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">signin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment">// todo</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">signout</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment">// todo</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
user<span class="token punctuation">,</span>
signin<span class="token punctuation">,</span>
signout<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="在组件中使用-model" tabindex="-1"><a class="header-anchor" href="#在组件中使用-model" aria-hidden="true">#</a> 在组件中使用 Model</h3><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> useModel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> user<span class="token punctuation">,</span> signin<span class="token punctuation">,</span> signout <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">&#39;useAuthModel&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="initialstate" tabindex="-1"><a class="header-anchor" href="#initialstate" aria-hidden="true">#</a> @@initialState</h3><p><code>beforeRender</code>的返回的内容会写入<code>@@initialState</code></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">const</span> beforeRender <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token operator">&lt;</span>PageLoading <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
<span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> setRole <span class="token punctuation">}</span> <span class="token operator">=</span> access<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token function">setRole</span><span class="token punctuation">(</span><span class="token string">&#39;admin&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 初始化应用的全局状态,可以通过 useModel(&#39;@@initialState&#39;) 获取,具体用法看@/components/UserCenter 文件</span>
<span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token string">&#39;harrywan&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后我们可以在其他组件中使用:</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ initialState.userName }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> useModel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@fesjs/fes&#39;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> initialState <span class="token operator">=</span> <span class="token function">useModel</span><span class="token punctuation">(</span><span class="token string">&#39;@@initialState&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
initialState<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scope</span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="api" tabindex="-1"><a class="header-anchor" href="#api" aria-hidden="true">#</a> API</h2><h3 id="usemodel" tabindex="-1"><a class="header-anchor" href="#usemodel" aria-hidden="true">#</a> useModel</h3><p><strong>useModel(name)</strong></p><ul><li><strong>类型</strong>:函数</li><li><strong>详情</strong>: 获取 Model 数据, 也就是 Model 文件默认导出函数执行的结果。</li><li><strong>参数</strong> <ul><li>name传入 Model 文件名</li></ul></li></ul></div><!--[--><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><a class="external-link meta-item-label" href="https://github.com/WeBankFinTech/fes.js/edit/next/docs/reference/plugin/plugins/model.md" rel="noopener noreferrer" target="_blank" aria-label="在 GitHub 上编辑此页"><!--[--><!--]--> 在 GitHub 上编辑此页 <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">在新窗口打开</span></span><!--[--><!--]--></a></div><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 445436867@qq.com">wanchun</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"><a href="/fes.js/reference/plugin/plugins/locale.html" class="" aria-label="@fesjs/plugin-locale"><!--[--><!--]--> @fesjs/plugin-locale <!--[--><!--]--></a></span><span class="next"><a href="/fes.js/reference/plugin/plugins/request.html" class="" aria-label="@fesjs/plugin-request"><!--[--><!--]--> @fesjs/plugin-request <!--[--><!--]--></a></span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!----><!--]--></div>
<script type="module" src="/fes.js/assets/app.005e0daf.js" defer></script>
</body>
</html>