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
    
}

我是马丁的车夫，欢迎转发收藏！