From db38697a91114a8ca6198336d101bd288f1764ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= <harrywan@webank.com>
Date: Thu, 25 Mar 2021 16:04:31 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=20=E6=9B=B4=E6=96=B0plugin-model?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/reference/plugin/plugins/model.md    | 65 +++++++++++++++++++++--
 docs/zh/reference/plugin/plugins/model.md | 65 +++++++++++++++++++++--
 2 files changed, 124 insertions(+), 6 deletions(-)

diff --git a/docs/reference/plugin/plugins/model.md b/docs/reference/plugin/plugins/model.md
index 8f89ded8..16e4b5ed 100644
--- a/docs/reference/plugin/plugins/model.md
+++ b/docs/reference/plugin/plugins/model.md
@@ -1,8 +1,67 @@
 # @fesjs/plugin-model
 
-
 ## 启用方式
+在 package.json 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@fesjs/fes": "^2.0.0",
+        "@fesjs/plugin-model": "^2.0.0"
+    },
+}
+```
+## 介绍
+一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新，提供 `reactive` 、 `ref` 等API把数据变成响应式的。我们使用`Provide / Inject`特性，在应用实例中共享响应式数据。
 
-## 配置
+我们约定`src/models` 目录下的文件为项目定义的 `model` 文件。每个文件需要默认导出一个 `function`。
+
+文件名则对应最终 `model` 的 `name`，你可以通过插件提供的 `API` 来消费 `model` 中的数据。
+
+### Model 文件
+**src/models/useAuthModel.js**
+```js
+import { reactive } from 'vue'
+
+export default function useAuthModel() {
+  const user = reactive({});
+
+  const signin = ()=>{
+      // todo
+  }
+
+  const signout = ()=>{
+      // todo
+  }
+
+  return {
+    user,
+    signin,
+    signout
+  }
+}
+```
+
+### 在组件中使用 Model
+```vue
+<script>
+import { useModel } from "@fesjs/fes"
+export default {
+    setup(){
+        const { user, signin, signout } = useModel("useAuthModel")
+    }
+}
+</script>
+```
+
+
+## API
+
+### useModel
+
+**useModel(name)**
+- **类型**：函数
+  
+- **详情**: 获取 Model 数据，也就是 Model 文件默认导出函数执行的结果。
+- **参数**：
+  - name，传入 Model 文件名
 
-## API
\ No newline at end of file
diff --git a/docs/zh/reference/plugin/plugins/model.md b/docs/zh/reference/plugin/plugins/model.md
index 8f89ded8..16e4b5ed 100644
--- a/docs/zh/reference/plugin/plugins/model.md
+++ b/docs/zh/reference/plugin/plugins/model.md
@@ -1,8 +1,67 @@
 # @fesjs/plugin-model
 
-
 ## 启用方式
+在 package.json 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@fesjs/fes": "^2.0.0",
+        "@fesjs/plugin-model": "^2.0.0"
+    },
+}
+```
+## 介绍
+一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新，提供 `reactive` 、 `ref` 等API把数据变成响应式的。我们使用`Provide / Inject`特性，在应用实例中共享响应式数据。
 
-## 配置
+我们约定`src/models` 目录下的文件为项目定义的 `model` 文件。每个文件需要默认导出一个 `function`。
+
+文件名则对应最终 `model` 的 `name`，你可以通过插件提供的 `API` 来消费 `model` 中的数据。
+
+### Model 文件
+**src/models/useAuthModel.js**
+```js
+import { reactive } from 'vue'
+
+export default function useAuthModel() {
+  const user = reactive({});
+
+  const signin = ()=>{
+      // todo
+  }
+
+  const signout = ()=>{
+      // todo
+  }
+
+  return {
+    user,
+    signin,
+    signout
+  }
+}
+```
+
+### 在组件中使用 Model
+```vue
+<script>
+import { useModel } from "@fesjs/fes"
+export default {
+    setup(){
+        const { user, signin, signout } = useModel("useAuthModel")
+    }
+}
+</script>
+```
+
+
+## API
+
+### useModel
+
+**useModel(name)**
+- **类型**：函数
+  
+- **详情**: 获取 Model 数据，也就是 Model 文件默认导出函数执行的结果。
+- **参数**：
+  - name，传入 Model 文件名
 
-## API
\ No newline at end of file