vue3获取数据的注意点

2021-08-16 21:32:29 阅读：268 来源： 互联网

标签：函数 reactive dataA dataB 获取数据 let 注意 vue3 twoFun

场景描述

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

标签：函数,reactive,dataA,dataB,获取数据,let,注意,vue3,twoFun
来源： https://www.cnblogs.com/IwishIcould/p/15145639.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9