A brief discussion on logic extraction and field display of Vue3 in projects

Logical Layering
Separate business from different regions
Advantages of doing this
How to deal with such a scenario
optimization
reactive does not necessarily have to be written in the setup function
How to display the value directly on the page

Logical Layering

When we use vue3 to develop projects,
How to carry out regional stratification? ? ? ?
For example, a region of a simple particle has [query logic, modified save logic, new addition logic, deletion logic]
This page may have other areas. Area A, Area B, Area C... [There are many logics]
At this time, we can separate the logic of an area

Separate business from different regions

export default {
  setup () {
    let {queryDo,addDo,delDO,EditDo}=allFun();
    queryDo(); //The query interface will be called}
}

// This is the logic of area A of page function allFun(){
  console.log('I am the direct statement in the allFun function and I will be executed' )
  function queryDo(){
    console.log('I am querying the interface and calling the backend data')
  }
  function addDo(){
    console.log('I am new')
  }
  function delDO(){
    console.log('I deleted')
  }
  function EditDo(){
    console.log('I am the editor interface')
  }
  return {queryDo,addDo,delDO,EditDo}
}
</script>

Advantages of doing this

When we see the allFun function.
We can know all the logic of this area
Contains CRUD. Convenient for later maintenance

How to deal with such a scenario

When we write business logic,
We finally found that both areas A and B need to call the same interface, but since area A has already written the called interface, I want to call the interface in area A directly.

<script>
export default {
  setup () {
    // The structure used here is area A let {queryDo,addDo,delDO,EditDo}=aAreaAllFun();

    // Area B let {querHander}=bAreaAllFun();

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

// This is the logic of a certain area on the A area page function aAreaAllFun(){
  function queryDo(){
    console.log('I am the query interface of area A')
  }
  function addDo(){
    console.log('I am new')
  }
  function delDO(){
    console.log('I deleted')
  }
  function EditDo(){
    console.log('I am the editor interface')
  }
  return {queryDo,addDo,delDO,EditDo}
}

// This is the business logic of area B function bAreaAllFun(){
  // Directly call the query interface of area A aAreaAllFun().queryDo();

  function querHander(){
    console.log("Query interface of area B")
  }
 
  return {querHander}
}
</script>

Although using
aAreaAllFun().queryDo();
Directly calling the query interface of area A solves the problem, but this creates a new problem: the query interface is included in area A;
The final approach is to separate the query interface.
This will also facilitate our later maintenance

optimization

<script>
export default {
  setup () {
     // This is the logic of a certain area on the A area page let {addDo,delDO,EditDo}=aAreaAllFun()
    
    // This is the logic of a certain area on the B area page let {querHander}=bAreaAllFun();

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

// Public query interface Many areas may use function queryDo(){
  console.log('I am the query interface of the region, I have been pulled out')
}

// This is the logic of a certain area on the A area page function aAreaAllFun(){
 
  function addDo(){
    console.log('I am new')
  }
  function delDO(){
    console.log('I deleted')
  }
  function EditDo(){
    console.log('I am the editor interface')
  }
  return {addDo,delDO,EditDo}
}

// This is the business logic of area B function bAreaAllFun(){
  // Directly call the public query interface queryDo();

  function querHander(){
    console.log("Query interface of area B")
  }
 
  return {querHander}
}
</script>

reactive does not necessarily have to be written in the setup function

Many friends think that reactive must be written in the setup function. In fact, it is not the case. It can be written where you need it. For example, you can use reactive in the following aAreaAllFun function.

<template>
  <div>
    <h2>Name: {{ areaData.info.name}}</h2>
    <h2>Age: {{ areaData.info.age}}</h2>
    <h2>Gender: {{ areaData.info.sex}}</h2>
  </div>
</template>
<script>
import { reactive } from '@vue/reactivity';
export default {
  setup () {
 
    let {addDo,areaData}=aAreaAllFun();

    return {addDo,areaData}
  }
}
// This is the logic of a certain area on the A area page function aAreaAllFun(){
  let areaData = reactive({
    info:
      name:'Zhang San',
      age:20,
      sex:'male'
    }
  })
  function addDo(){
    console.log('I am new')
  }
  return {addDo,areaData}
}
</script>

How to display the value directly on the page

In the above example, we want to implement name, age, and gender, we need areaData.info.xxx
This is too troublesome, we need to optimize it

<template>
  <div>
    <h2>Name: {{ name}}</h2>
    <h2>Age: {{ age}}</h2>
    <h2>Gender: {{ sex}}</h2>
  </div>

  <button @click="ChangeCont">Change value</button>
</template>
<script>
import { reactive,toRefs } from 'vue';
export default {
  setup () {
    let {name,age,sex,ChangeCont }=aAreaAllFun();
    return {name,age,sex,ChangeCont}
  }
}
// This is the logic of a certain area on the A area page function aAreaAllFun(){
  let areaData = reactive({
    info:
      name:'Zhang San',
      age:20,
      sex:'male'
    }
  })

  function ChangeCont(){
    // If you change the value in this way, the view will not respond. [Error]
    //areaData.info={
    // name:'Li Si',
    //age:21,
    // sex:'male'
    // }

    // This is OK to update the view correctly [ok]
    areaData.info.name='123'
    areaData.info.age=12
    areaData.info.sex='male'
  }

  // toRefs can convert a responsive object to a normal object.
  // Every value of this common object is a ref.
  // Since it becomes a ref, we need to use the value.
  return {ChangeCont,...toRefs(areaData.info)}
}
</script>

This is the end of this article about the logic extraction and field display of vue3 in the project. For more relevant vue3 logic extraction and field display content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: