邏輯分層

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

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！