vue3获取数据的注意点

场景描述

在使用vue3的时候。我们很多人喜欢一个页面分成几个几个部分来写
这样做的目的是为了区分。
做的彼此的逻辑互相独立，互不干扰
但是有的时候，我们可能会去获取不属于自己区域的函数
这个时候我们有集中方式去获取函数呢？？

传参的方式

<script>
import { reactive } from '@vue/reactivity'
export default {
  setup () {
    let { dataA }=oneFun(dataB);
    let { dataB }=twoFun(dataA);
    return {dataA,dataB }
  }
}

// 这个函数包含自己的业务以及自己的数据。
function oneFun(dataB){
  let dataA=reactive({
     tbaleData:[],
     index:1,
  })
  console.log('通过传递参数的形似获取twoFun中的数据',dataB );
  return {dataA}
}

// 这个函数包含自己的业务以及自己的数据。
function twoFun(dataA){
  let dataB=reactive({
     list:[ {name:'你是我的荣耀'}, {name:'司藤'}, ]
  })
  console.log('通过传递参数的形似获取oneFun中的数据',dataA );
  return {dataB}
}
</script>

为什么是undefined呢？？？

为什么我获取dataB中的数据是undefined呢？why????
因为js执行是有顺序行的。
问题就出现这下面两行代码上
let { dataA }=oneFun(dataB);
let { dataB }=twoFun(dataA);
当我们执行 oneFun函数的时候；
这个时候dataB 并没有解构结构出来。
所以是undefined了。

如何处理undefined

那就是将dataA中的数据分离出去。
这样就可以解决了

<script>
import { reactive } from '@vue/reactivity'
export default {
  setup () {
    // 将dataA抽离出来了
    let dataA=reactive({
      tbaleData:[],
      index:1,
    })
    // dataB中的数据仍然在twoFun函数体中
    let { dataB }=twoFun(dataA);
    oneFun(dataB); //调用oneFun函数
    return {dataA,dataB }
  }
}

// 这个函数包处理业务
function oneFun(dataB){
  console.log('通过传递参数的形似获取twoFun中的数据',dataB );
}

// 这个函数包含自己的业务以及自己的数据。
function twoFun(dataA){
  let dataB=reactive({
     list:[ {name:'你是我的荣耀'}, {name:'司藤'}, ]
  })
  console.log('通过传递参数的形似获取oneFun中的数据',dataA );
  return {dataB}
}
</script>

有没有更好的写法呢？

如果在A函数中需要dataB中的数据，B函数需要dataA中的数据
跟人建议不要这样套娃操作
最好的是将dataB和dataA放在同一个reactive中就行了。
我非常推荐这样的做法。
 setup () {
    let dataA=reactive({
      dataA:[],
      dataB:1,
    })
  }
这样的好处需要数据是处理更加的方便了。

上面我说到在A函数中需要dataB中的数据，B函数需要dataA中的数据
这样互相调用其中一个肯定是undefined
也不要出现 A函数去调用B函数，B函数中去调用A函数。
这样是非常糟糕的哈。

通过函数中调用

<script>
import { reactive } from '@vue/reactivity'
export default {
  setup () {
    let { getdataA }=oneFun();
    let { getdataB }=twoFun();
    return {getdataA,getdataB }
  }
}

function oneFun(){
  let dataA=reactive({
    tbaleData:[],
    index:1,
  })
  // 通过函数的获取获取形零国外一个函数中的值
  console.log("==>", twoFun().getdataB() ); 
}

function twoFun(){
    let dataB=reactive({
      list:[ {name:'你是我的荣耀'}, {name:'司藤'}, ]
    })
    
    //调用该函数可以获取该函数体内部的值
    function getdataB(){
      return dataB
    } 
    return { getdataB }
}
</script>

有交叉的逻辑如何处理

最近在使用vue3的项目逻辑中。
发现一个很有意思的现象?
表格中的编辑这个逻辑有交叉【点击编辑打开一个对话框】。
它既可以属于表格中的逻辑，也可以属于后面对话框中的逻辑。
经过我反复的思考，我决定把它划分在对话框这个逻辑区域。
以为点击表格中的的编辑虽然是在表格中发生的，但是最后对话框中的保存按钮。
会发送一个请求。打开弹窗只是一个开始。最后结束的是弹窗中的保存按钮
所以，最后一个是在那个区域发生的，就应该属于哪一个区域