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

Scene description

When using vue3. Many of us like to break a page into sections for the purpose of differentiation. They're logically independent of each other but sometimes we might want to get functions that don't belong to our region and when we have a centralized way to get functions?Copy the code

The method of passing a parameter

<script> import { reactive } from '@vue/reactivity' export default { setup () { let { dataA }=oneFun(dataB); let { dataB }=twoFun(dataA); Return {dataA,dataB}}} // This function contains its own business and data. Function oneFun(dataB){let dataA=reactive({tbaleData:[], index:1,}) console.log(' get data from twoFun by passin ',dataB); function oneFun(dataB){let dataA=reactive({tbaleData:[], index:1,}) console.log(' get data from twoFun by passin ',dataB); Return {dataA}} // This function contains its own business and its own data. Function twoFun(dataA){let dataB=reactive({list:[{name:' you're my honor '}, {name:' Rasta '}, function twoFun(dataA){let dataB=reactive({list: 'you're my honor '}, {name:' Rasta '}, ]}) console.log(' get the data in oneFun by passing the shape of the argument ',dataA); return {dataB} } </script>Copy the code

Why is undefined??

Why am I getting undefined in the dataB? why???? Because js execution has sequential lines. Let {dataA}=oneFun(dataB); let { dataB }=twoFun(dataA); When we execute the oneFun function; DataB is not deconstructed at this time. So undefined.Copy the code

How to deal with undefined

That is to separate out the data in dataA. <script> import {reactive} from '@vue/reactivity' export default {setup () {// pull dataA out Let {dataB}=twoFun(dataA); reactive({tbaleData:[], index:1,}); oneFun(dataB); // Call the oneFun function return {dataA,dataB}}} function oneFun(dataB){console.log(' get the data in twoFun by passing the looklike parameter ',dataB);  } // This function contains its own business and its own data. Function twoFun(dataA){let dataB=reactive({list:[{name:' you're my honor '}, {name:' Rasta '}, function twoFun(dataA){let dataB=reactive({list: 'you're my honor '}, {name:' Rasta '}, ]}) console.log(' get the data in oneFun by passing the shape of the argument ',dataA); return {dataB} } </script>Copy the code

Is there a better way to write it?

If function A needs the data from the dataB, function B needs the data from the dataA. Instead of doing this, it's best to put the dataB and dataA in the same reactive area. I highly recommend it. Setup () {let dataA=reactive({dataA:[], dataB:1,})} I said above that you need data from dataB in function A, data from dataA in function B so you can call each other and one of them must be undefined and you can't have function A calling function B, function B calling function A. This is very bad.Copy the code

What about intersecting logic

Recently in the project logic using VUE3. I found something very interesting, right? The edit logic in the table is crossed [click edit to open a dialog box]. It can belong either to the logic in the table or to the logic in the dialog box that follows. After much thought, I decided to divide it into a logical area called the dialog box. When you click edit in the table, it happens in the table, but the save button in the final dialog box. A request is sent. Opening a popover is just the beginning. And then it ends with the save button in the popover so if the last one happens in that area, it should belong in that areaCopy the code