@fesjs/plugin-model
优质
小牛编辑
132浏览
2023-12-01
启用方式
在 package.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
import { reactive } from 'vue'
export default function useAuthModel() {
const user = reactive({});
const signin = ()=>{
// todo
}
const signout = ()=>{
// todo
}
return {
user,
signin,
signout
}
}
在组件中使用 Model
<script>
import { useModel } from "@fesjs/fes"
export default {
setup(){
const { user, signin, signout } = useModel("useAuthModel")
}
}
</script>
API
useModel
useModel(name)
类型:函数
详情: 获取 Model 数据,也就是 Model 文件默认导出函数执行的结果。
参数:
- name,传入 Model 文件名