逻辑分层
我们在使用vue3开发项目的时候，
如何进行【区域分层】呢？？？？
举一个简单的小粒子
一个区域有【查询逻辑、修改后的保存逻辑、新增逻辑、删除逻辑】
这个页面可能还有其他的区域。A区域、B区域,C区域...【有很多逻辑】
这个时候我们可以将一个区域的逻辑分离出去
将各个区域业务分开
export default { setup () { let {queryDo,addDo,delDO,EditDo}=allFun(); queryDo();//查询接口就会被调用了 } } // 这个是页面A区域的逻辑 function allFun(){ console.log('我是 allFun 函数内的直接语句我将会被执行' ) function queryDo(){ console.log('我是查询接口，调用后端的数据') } function addDo(){ console.log('我是新增') } function delDO(){ console.log('我是删除') } function EditDo(){ console.log('我是编辑接口') } return {queryDo,addDo,delDO,EditDo} } </script>
这样做的优势
当我们看见 allFun函数的时候。
我们就可以知道这个区域的所有逻辑
包含crud。方便后期的维护
这样的场景应该如何处理
在我们写业务逻辑的时候，
我们最后发现 A和B两个区域都需要调用同一个接口
但是由于A区域已经写好了这个被调用的接口
这个时候我就想直接去调用A区域中的接口
<script> export default { setup () { // 这里使用的是结构，A区域 let {queryDo,addDo,delDO,EditDo}=aAreaAllFun(); // B区域 let {querHander}=bAreaAllFun(); return {queryDo,addDo,delDO,EditDo,querHander} } } // 这个是A区域页面某个区域的逻辑 function aAreaAllFun(){ function queryDo(){ console.log('我是A区域的查询接口') } function addDo(){ console.log('我是新增') } function delDO(){ console.log('我是删除') } function EditDo(){ console.log('我是编辑接口') } return {queryDo,addDo,delDO,EditDo} } // 这是B区域的业务逻辑 function bAreaAllFun(){ // 直接去调用A区域的查询接口 aAreaAllFun().queryDo(); function querHander(){ console.log("B区域的查询接口") } return {querHander} } </script>
虽然使用
aAreaAllFun().queryDo();
直接去调用A区域的查询接口
解决了问题
但是这样产生了一个新的问题是
查询接口被包含在了A区域；
最后的做法是查询接口应该单独抽离出去，
这样也方便后期我们的维护
优化
<script> export default { setup () { // 这个是A区域页面某个区域的逻辑 let {addDo,delDO,EditDo}=aAreaAllFun() // 这个是B区域页面某个区域的逻辑 let {querHander}=bAreaAllFun(); return {queryDo,addDo,delDO,EditDo,querHander} } } // 公共的查询接口 很多区域可能会使用 function queryDo(){ console.log('我是区域的查询接口，我被抽离出去了') } // 这个是A区域页面某个区域的逻辑 function aAreaAllFun(){ function addDo(){ console.log('我是新增') } function delDO(){ console.log('我是删除') } function EditDo(){ console.log('我是编辑接口') } return {addDo,delDO,EditDo} } // 这是B区域的业务逻辑 function bAreaAllFun(){ // 直接去调用公共的查询接口 queryDo(); function querHander(){ console.log("B区域的查询接口") } return {querHander} } </script>
reactive 不一定非要写在setup函数中
很多的小伙伴以为reactive一定要写在setup函数中
其实不是这样的哈
它可以写在你需要的地方
比如下面的aAreaAllFun函数中可以使用reactive
<template> <div> <h2>姓名: {{ areaData.info.name}}</h2> <h2>年龄: {{ areaData.info.age}}</h2> <h2>性别: {{ areaData.info.sex}}</h2> </div> </template> <script> import { reactive } from '@vue/reactivity'; export default { setup () { let {addDo,areaData}=aAreaAllFun(); return {addDo,areaData} } } // 这个是A区域页面某个区域的逻辑 function aAreaAllFun(){ let areaData=reactive({ info:{ name:'张三', age:20, sex:'男' } }) function addDo(){ console.log('我是新增') } return {addDo,areaData} } </script>
如何在页面上直接显示值
在上面这个例子中
我们想要实现姓名、年龄、和性别
我们需要 areaData.info.xxx
这样做太麻烦了，我们需要优化一下
<template> <div> <h2>姓名: {{ name}}</h2> <h2>年龄: {{ age}}</h2> <h2>性别: {{ sex}}</h2> </div> <button @click="ChangeCont">改变值</button> </template> <script> import { reactive,toRefs } from 'vue'; export default { setup () { let {name,age,sex,ChangeCont }=aAreaAllFun(); return {name,age,sex,ChangeCont} } } // 这个是A区域页面某个区域的逻辑 function aAreaAllFun(){ let areaData=reactive({ info:{ name:'张三', age:20, sex:'男' } }) function ChangeCont(){ // 这样更改值，视图上是不会响应的哈【错误的】 // areaData.info={ // name:'李四', // age:21, // sex:'男' // } // 这样是可以的正确跟新视图的 【ok的】 areaData.info.name='123' areaData.info.age=12 areaData.info.sex='男' } // toRefs 可以把一个响应式对象转换为普通的对象。 // 该普通对象的每一个值都是ref。 // 由于变成了ref，所以我们需要使用value。 return {ChangeCont,...toRefs(areaData.info)} } </script>
