Vue3+Typescript模塊化邏輯層

Vue3模塊化指的是，把HTML和邏輯代碼分離，對一個頁面有多個復雜的功能時，可以一個功能對應一個文件，提高可讀性，復用性，維護性，並且在遇到相同功能展示不同的UI時，可以直接集成某一個功能進行實現。

下面一個小案列：

實列：下面頁面實現了兩個功能，一個是數字加減，一個是數組添加和刪除

 

1.Home頁面

<template>
  <div class="home">
    <br/>
    數字：{{sum}}
    <button type="button" @click="add">加</button>
    <button type="button" @click="reduce">減</button>
    
    <p>
        輸入追加的數字：<input type="" name="" id="" v-model="value"  /><button type="button" @click="pushEvent">追加數組</button>
        <button type="button" @click="deleteEvent">刪除最后一項</button>
    </p>
    <div>
        <p v-for="(item,index) in arr" :key="index">
            {{item}}
        </p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// 抽離的邏輯代碼進行導出Home.ts文件內容
import {sum, add,parameter,reduce,pushEvent,deleteEvent} from '@/hook/Home.ts'
import { toRefs } from 'vue';
export default defineComponent({
  name: 'Home',
  components: {
    
  },
  setup(){
      return {
          add,reduce,
          pushEvent,
          deleteEvent,
          sum,
          ...toRefs(parameter)
      }
  }
});


</script>

2.創建的src/hook/Home.ts（實現數據的邏輯代碼）

import { ref,reactive,toRefs } from 'vue';
// 1.數組循環 並且添加/刪除// arr 數據接口 定義arr常量數組內必須全部是數字
interface arr {
    arr:Array<number>,
    value:number
}
const parameter = reactive<arr>({
    arr:[1,2,3,4],
    value:0
});
// 給數組末尾追加
function pushEvent(){
    if(parameter.value>0){ // 只能添加大於0的數字
        parameter.arr.push(parameter.value)
    }
}
// 刪除數組最后一個
function deleteEvent(){
    parameter.arr.pop()
}
// **********************************************
// 2.數字加減
const sum = ref<number>(1)
function add(){
    sum.value +=1
}
function reduce(){
    sum.value -=1
}
export {
    sum,
    add,
    reduce,
    deleteEvent,
    parameter,
    pushEvent
    
}

 

我是馬丁的車夫，歡迎轉發收藏！