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

逻辑分层

我们在使用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>

到此这篇关于浅谈vue3在项目中的逻辑抽离和字段显示的文章就介绍到这了,更多相关vue3 逻辑抽离和字段显示内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！

黄山市民网：https://www.huangshanshimin.com/

目录