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

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

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:
  • Vue implements the method of displaying data in user-defined fields

<<:  Mysql 8.0.18 hash join test (recommended)

>>:  Tutorial on using portainer to connect to remote docker

Recommend

Detailed explanation of CSS animation attribute keyframes

How long has it been since I updated my column? H...

How to avoid data loop conflicts when MySQL is configured with dual masters

I wonder if you have ever thought about this ques...

jQuery plugin to implement minesweeper game (3)

This article shares the third article on how to u...

Complete steps to use element in vue3.0

Preface: Use the element framework in vue3.0, bec...

Record of the actual process of packaging and deployment of Vue project

Table of contents Preface 1. Preparation - Server...

How to run Hadoop and create images in Docker

Reinventing the wheel, here we use repackaging to...

How to implement responsive layout in vue-cli

When we are doing front-end development, we will ...

MySQL index usage instructions (single-column index and multi-column index)

1. Single column index Choosing which columns to ...

Simple method to install mysql under linux

When searching online for methods to install MySQ...

The latest graphic tutorial of mysql 8.0.16 winx64 installation under win10

In order to download this database, it takes a lo...

Detailed explanation of HTML programming tags and document structure

The purpose of using HTML to mark up content is t...

How to write beautiful HTML code

What Beautiful HTML Code Looks Like How to write ...

How to use localStorage in JavaScript

If you are a developer looking to get into the wo...

Summary of HTML knowledge points for the front end (recommended)

1. HTML Overview htyper text markup language Hype...

Detailed explanation of JavaScript closure issues

Closures are one of the traditional features of p...