fes.js/docs/zh/reference/plugin/plugins/model.md

68 lines
1.4 KiB
Markdown
Raw Normal View History

2021-03-05 18:58:14 +08:00
# @fesjs/plugin-model
2021-03-03 20:32:13 +08:00
## 启用方式
2021-03-25 16:04:31 +08:00
在 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
2021-03-03 20:32:13 +08:00
2021-03-25 16:04:31 +08:00
**useModel(name)**
- **类型**:函数
- **详情**: 获取 Model 数据,也就是 Model 文件默认导出函数执行的结果。
- **参数**
- name传入 Model 文件名
2021-03-03 20:32:13 +08:00