Logical layering
When we were using the vue3 development project,
How to perform [regional stratification]? ? ? ?
Take a simple small particle
One area has [query logic, modified save logic, new logic, delete logic]
There may be other areas on this page. Area A, Area B, Area C...【There are a lot of logic】
At this time, we can separate the logic of an area
Separate regional businesses
export default {
setup () {
let {queryDo,addDo,delDO,EditDo}=allFun();
queryDo();//The query interface will be called
}
}
// This is the logic of the A area of pagefunction allFun(){
('I am a direct statement inside allFun function I will be executed' )
function queryDo(){
('I am querying the interface and calling the data from the backend')
}
function addDo(){
('I'm new')
}
function delDO(){
('I'm deleting')
}
function EditDo(){
('I'm 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
- Includes crud. Convenient for later maintenance
How should such a scenario be handled
When we write business logic,
We finally found that both A and B need to call the same interface
However, since the A area has written the called interface
At this time, I want to directly call the interface in area A
<script>
export default {
setup () {
// The structure is used here, 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 of the A area pagefunction aAreaAllFun(){
function queryDo(){
('I am the query interface for area A')
}
function addDo(){
('I'm new')
}
function delDO(){
('I'm deleting')
}
function EditDo(){
('I'm the editor interface')
}
return {queryDo,addDo,delDO,EditDo}
}
// This is the business logic of area Bfunction bAreaAllFun(){
// Directly call the query interface in area A aAreaAllFun().queryDo();
function querHander(){
("Query interface for area B")
}
return {querHander}
}
</script>
Although use
aAreaAllFun().queryDo();
Directly call the query interface in area A
Solved the problem
But this creates a new problem
The query interface is included in Area A;
The final approach is to extract the query interface separately.
This will also facilitate our maintenance in the later stage
optimization
<script>
export default {
setup () {
// This is the logic of a certain area of the A area page let {addDo,delDO,EditDo}=aAreaAllFun()
// This is the logic of a certain area of the B area page let {querHander}=bAreaAllFun();
return {queryDo,addDo,delDO,EditDo,querHander}
}
}
// Public query interface Many areas may usefunction queryDo(){
('I am the query interface of the region, I was withdrawn')
}
// This is the logic of a certain area of the A area pagefunction aAreaAllFun(){
function addDo(){
('I'm new')
}
function delDO(){
('I'm deleting')
}
function EditDo(){
('I'm the editor interface')
}
return {addDo,delDO,EditDo}
}
// This is the business logic of area Bfunction bAreaAllFun(){
// Directly call the public query interface queryDo();
function querHander(){
("Query interface for area B")
}
return {querHander}
}
</script>
reactive doesn't have to be written in the setup function
Many friends think that reactive must be written in the setup function
Actually, this is not the case
It can be written where you need it
For example, reactive can be used in the aAreaAllFun function below
<template>
<div>
<h2>Name: {{ }}</h2>
<h2>age: {{ }}</h2>
<h2>gender: {{ }}</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 of the A area pagefunction aAreaAllFun(){
let areaData=reactive({
info:{
name:'Zhang San',
age:20,
sex:'male'
}
})
function addDo(){
('I'm new')
}
return {addDo,areaData}
}
</script>
How to display values directly on the page
In the above example
We want to achieve name, age, and gender
we need to
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 the 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 of the A area pagefunction aAreaAllFun(){
let areaData=reactive({
info:{
name:'Zhang San',
age:20,
sex:'male'
}
})
function ChangeCont(){
// Change the value in this way, the view will not respond [Error] // ={
// name:'Li Si', // age:21,
// sex:'Male' // }
// This can be correct with the new view [ok] ='123'
=12
='male'
}
// toRefs can convert a responsive object into a normal object. // Every value of this normal object is a ref. // Since it becomes ref, we need to use value. return {ChangeCont,...toRefs()}
}
</script>
This is the article about the logical separation and field display of vue3 in the project. For more related contents of vue3 logic separation and field display, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!