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的項目邏輯中。
發現一個很有意思的現象?
表格中的編輯這個邏輯有交叉【點擊編輯打開一個對話框】。
它既可以屬於表格中的邏輯，也可以屬於后面對話框中的邏輯。
經過我反復的思考，我決定把它划分在對話框這個邏輯區域。
以為點擊表格中的的編輯雖然是在表格中發生的，但是最后對話框中的保存按鈕。
會發送一個請求。打開彈窗只是一個開始。最后結束的是彈窗中的保存按鈕
所以，最后一個是在那個區域發生的，就應該屬於哪一個區域