vue3在项目中的逻辑抽离和字段显示

“这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战”

逻辑分层

咱们在使用vue3开发项目的时候，
如何进行【区域分层】呢？？？？
举一个简单的小粒子
一个区域有【查询逻辑、修改后的保存逻辑、新增逻辑、删除逻辑】
这个页面可能还有其余的区域。A区域、B区域,C区域...【有不少逻辑】
这个时候咱们能够将一个区域的逻辑分离出去
复制代码

将各个区域业务分开

export default {
  setup () {
    let {queryDo,addDo,delDO,EditDo}=allFun();
    queryDo();//查询接口就会被调用了
  
  }
}

// 这个是页面A区域的逻辑
function allFun(){
  console.log('我是 allFun 函数内的直接语句我将会被执行' )
  function queryDo(){
    console.log('我是查询接口，调用后端的数据')
  }
  function addDo(){
    console.log('我是新增')
  }
  function delDO(){
    console.log('我是删除')
  }
  function EditDo(){
    console.log('我是编辑接口')
  }
  return {queryDo,addDo,delDO,EditDo}
}
</script>
复制代码

这样作的优点

当咱们看见 allFun函数的时候。
咱们就能够知道这个区域的全部逻辑
包含crud。方便后期的维护
复制代码

这样的场景应该如何处理

在咱们写业务逻辑的时候，
咱们最后发现 A和B两个区域都须要调用同一个接口
可是因为A区域已经写好了这个被调用的接口
这个时候我就想直接去调用A区域中的接口
复制代码

<script>
export default {
  setup () {
    // 这里使用的是结构，A区域
    let {queryDo,addDo,delDO,EditDo}=aAreaAllFun();

    // B区域
    let {querHander}=bAreaAllFun();

    return {queryDo,addDo,delDO,EditDo,querHander}
  }
}

// 这个是A区域页面某个区域的逻辑
function aAreaAllFun(){
  function queryDo(){
    console.log('我是A区域的查询接口')
  }
  function addDo(){
    console.log('我是新增')
  }
  function delDO(){
    console.log('我是删除')
  }
  function EditDo(){
    console.log('我是编辑接口')
  }
  return {queryDo,addDo,delDO,EditDo}
}

// 这是B区域的业务逻辑
function bAreaAllFun(){
  // 直接去调用A区域的查询接口
  aAreaAllFun().queryDo();

  function querHander(){
    console.log("B区域的查询接口")
  }
 
  return {querHander}
}
</script>
复制代码

虽然使用
aAreaAllFun().queryDo();
直接去调用A区域的查询接口
解决了问题
可是这样产生了一个新的问题是
查询接口被包含在了A区域；
最后的作法是查询接口应该单独抽离出去，
这样也方便后期咱们的维护
复制代码

优化

<script>
export default {
  setup () {
     // 这个是A区域页面某个区域的逻辑
    let {addDo,delDO,EditDo}=aAreaAllFun()
    
    // 这个是B区域页面某个区域的逻辑
    let {querHander}=bAreaAllFun();

    return {queryDo,addDo,delDO,EditDo,querHander}
  }
}

// 公共的查询接口 不少区域可能会使用
function queryDo(){
  console.log('我是区域的查询接口，我被抽离出去了')
}

// 这个是A区域页面某个区域的逻辑
function aAreaAllFun(){
 
  function addDo(){
    console.log('我是新增')
  }
  function delDO(){
    console.log('我是删除')
  }
  function EditDo(){
    console.log('我是编辑接口')
  }
  return {addDo,delDO,EditDo}
}

// 这是B区域的业务逻辑
function bAreaAllFun(){
  // 直接去调用公共的查询接口
   queryDo();

  function querHander(){
    console.log("B区域的查询接口")
  }
 
  return {querHander}
}
</script>
复制代码

reactive 不必定非要写在setup函数中

不少的小伙伴觉得reactive必定要写在setup函数中
其实不是这样的哈
它能够写在你须要的地方
好比下面的aAreaAllFun函数中能够使用reactive
复制代码

<template>
  <div>
    <h2>姓名: {{ areaData.info.name}}</h2>
    <h2>年龄: {{ areaData.info.age}}</h2>
    <h2>性别: {{ areaData.info.sex}}</h2>
  </div>
</template>
<script>
import { reactive } from '@vue/reactivity';
export default {
  setup () {
 
    let {addDo,areaData}=aAreaAllFun();

    return {addDo,areaData}
  }
}
// 这个是A区域页面某个区域的逻辑
function aAreaAllFun(){
  let areaData=reactive({
    info:{
      name:'张三',
      age:20,
      sex:'男'
    }
  })
  function addDo(){
    console.log('我是新增')
  }
  return {addDo,areaData}
}
</script>
复制代码

如何在页面上直接显示值

在上面这个例子中
咱们想要实现姓名、年龄、和性别
咱们须要 areaData.info.xxx
这样作太麻烦了，咱们须要优化一下
复制代码

<template>
  <div>
    <h2>姓名: {{ name}}</h2>
    <h2>年龄: {{ age}}</h2>
    <h2>性别: {{ sex}}</h2>
  </div>

  <button @click="ChangeCont">改变值</button>
</template>
<script>
import { reactive,toRefs } from 'vue';
export default {
  setup () {
    let {name,age,sex,ChangeCont }=aAreaAllFun();
    return {name,age,sex,ChangeCont}
  }
}
// 这个是A区域页面某个区域的逻辑
function aAreaAllFun(){
  let areaData=reactive({
    info:{
      name:'张三',
      age:20,
      sex:'男'
    }
  })

  function ChangeCont(){
    // 这样更改值，视图上是不会响应的哈【错误的】
    // areaData.info={
    //   name:'李四',
    //   age:21,
    //   sex:'男'
    // }

    // 这样是能够的正确跟新视图的 【ok的】
    areaData.info.name='123'
    areaData.info.age=12
    areaData.info.sex='男'
  }

  //   toRefs 能够把一个响应式对象转换为普通的对象。
  // 该普通对象的每个值都是ref。
  // 因为变成了ref，因此咱们须要使用value。
  return {ChangeCont,...toRefs(areaData.info)}
}
</script>
复制代码