“This is the sixth day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.”

Logical layering

How do we layer areas with vuE3 development projects ？？？？ Take a simple small particle one area has [query logic, modified save logic, add logic, delete logic] this page may have other areas. Area A, area B, area C... [There is a lot of logic] At this point we can separate out the logic of a regionCopy the code

Separate regional operations

export default { setup () { let {queryDo,addDo,delDO,EditDo}=allFun(); queryDo(); }} function allFun(){console.log(' I am A direct statement in allFun and I will be executed ') function queryDo(){ Console. log(' I am the query interface, } function addDo(){console.log(' I'm adding ')} function delDO(){console.log(' I'm deleting ')} function EditDo(){ The console. The log (' I am editing interface ')} return {queryDo addDo, delDO, EditDo}} < / script >Copy the code

The advantages of doing so

When we see the allFun function. We know that all logic for this region contains CRUD. Convenient maintenanceCopy the code

How should such a scenario be handled

When we were writing the business logic, we finally realized that both area A and area B needed to call the same interface, but since area A had already written the interface to be called, I wanted to call the interface in area A directlyCopy the code
< script > export default {the setup () {/ / used here is structure, A regional let {queryDo addDo, delDO, EditDo} = aAreaAllFun (); // let {querHander}=bAreaAllFun(); Return {queryDo addDo, delDO EditDo, querHander}}} / / this is A regional page logic function of A region aAreaAllFun () {function queryDo () { The console. The log (' I am A regional query interface)} function addDo () {the console. The log (' I am A new ')} function delDO () {the console. The log (' is I delete ')} function EditDo () {the console. The log (' I am editing interface ')} return {queryDo addDo, delDO, EditDo}} / / this is B area of the business logic function bAreaAllFun () {/ / AAreaAllFun ().queryDo(); Function querHander(){console.log(" query interface for B ")} return {querHander}} </script>Copy the code
While using aAreaAllFun().queryDo(); Directly calling the query interface in region A solved the problem, but it created A new problem that the query interface was included in region A; Finally, the query interface should be taken out separately to facilitate maintenanceCopy the code

To optimize the

<script> export default {setup () {let {addDo,delDO,EditDo}=aAreaAllFun() {querHander}=bAreaAllFun(); Return {queryDo addDo, delDO EditDo, querHander}}} / / public query interface Many areas may use function queryDo () {the console. The log (' I am region query interface, Function addDo(){console.log(' I'm new ')} function delDO(){function addDo(){console.log(' I'm new ')} function delDO(){ Log (' I'm deleting ')} function EditDo(){console.log(' I'm editing ')} return {addDo,delDO,EditDo}} // This is the business logic function in B BAreaAllFun (){// call queryDo() directly; Function querHander(){console.log(" query interface for B ")} return {querHander}} </script>Copy the code

Reactive doesn’t have to be in the setup function

A lot of people think that reactive has to be in the setup function, but it's not. It can be in the setup function where you want it to be, like in the aAreaAllFun function below. Reactive has to be in itCopy the code
< the template > < div > < h2 > name: {{areaData. Info. Name}} < / h2 > < h2 > age: {{areaData. Info. Age}} < / h2 > < h2 > gender: {{ areaData.info.sex}}</h2> </div> </template> <script> import { reactive } from '@vue/reactivity'; export default { setup () { let {addDo,areaData}=aAreaAllFun(); Return {addDo,areaData}}} function aAreaAllFun(){let areaData=reactive({info:{name:' reactive ', Age :20, sex:' boy '}}) function addDo(){console.log(' I'm new ')} return {addDo,areaData}} </script>Copy the code

How do I display values directly on the page

In the example above we want to implement the name, age, and gender we need areaData. Info.xxx this is too much trouble, we need to optimize itCopy the code
< the template > < div > < h2 > name: {{name}} < / h2 > < h2 > age: {{age}} < / h2 > < h2 > gender: < span style =" box-sizing: border-box; color: RGB (255, 255, 255); line-height: 22px; font-size: 12px! Important; white-space: normal; 'vue'; export default { setup () { let {name,age,sex,ChangeCont }=aAreaAllFun(); Return {name,age,sex,ChangeCont}}} function aAreaAllFun(){let areaData=reactive({info:{ Name :' name ', age:20, sex:' name '}}) function ChangeCont(){ // areaData. Info ={// name:' name ', // age:21, Name ='123' areaData. Age =12 areaData. Info. sex=' male '} // toRefs You can convert a reactive object to a normal object. // Each value of the common object is ref. // Since it becomes ref, we need to use value. return {ChangeCont,... toRefs(areaData.info)} } </script>Copy the code