Vue3+typescript封装可复用逻辑

     基于vue3的compositonAPI 组合式api的特点, 我们可以很灵活的封装一些复用性高的逻辑,那么分享一下,我是如何进行封装的

1. 创建一个plugins文件(用于存放公共逻辑)

2. 创建一个ts文件(或者js文件) 在文件中我们将用到的函数和方法引入进来

import {
  isRef,
  onMounted,
  reactive,
  ref,
  watch,
  watchEffect,
  toRefs,
  computed
} from "vue";
import { useStore } from "vuex";
import axios from 'axios'
import { useRoute, useRouter } from "vue-router";

3.  通过 export 将函数等导出 (这里我将 此功能用到的变量和函数都放到了 rickFun函数中,并且return出去, 在此函数中 也可以用到vue的生命周期以及 vuex 和 router等方法, 在这就体现出了composition api的好用了) 

export function rickFun(){
  const pageData:any = reactive({
    flag:false,
    form:{
      name:'',
      department:'',
      position:'',
      date:'',
      id:''
    },
    tableData:[],
    activeIndex:0,
    watchActiveIndex:0,
    computedActiveIndexfirst:0,
    computedActiveIndexsecond: 1,
    acacc: computed(() => {
      return String(pageData.computedActiveIndexfirst) + pageData.computedActiveIndexsecond +"computed计算出的"
    })
  })
  watch(() => pageData.activeIndex,(old,newData)=>{
    pageData.watchActiveIndex -= 1
  }) 
  const computedData = computed(()=>{
    console.log(1);
    
    return pageData.computedActiveIndex+100
  })
  const methods = {
    // 显示添加表格
    addTable(){
      pageData.flag = true;
    },
    // 取消添加表单
    cancelTable(){
      pageData.flag = false;
    },
    // 添加表格数据
    addTableData(){ 
      if(pageData.form.name===''){
        if (!confirm('确定添加空白吗')){
          return false;
        }
      }
      pageData.tableData.push(pageData.form as never)
      pageData.form = {
        name: '',
        department: '',
        position: '',
        date: '',
        id: ''
      };
      console.log(pageData.tableData);
    },
    // 编辑表格数据
    editTableData(data:any){
      pageData.flag = true;
      pageData.form = JSON.parse(JSON.stringify(data))
    },
    // 删除表格数据
    deleteTableData(index:any){
      pageData.tableData.splice(index,1)
    }
  }
  onMounted(() => {
    setInterval(()=>{
      pageData.activeIndex+=1
    },1500)
  axios.request({
    url: '../../js2/staff.json',
    method: 'get',
  }).then((res) => {
    pageData.tableData = res.data.list;
  }).catch(err => {
    console.log(err);
  });
  })
  return{
    pageData,
    ...methods,
    computedData
  }
}

4.  将公共的功能逻辑写好后, 就可以到vue文件 引入我们想要的方法和属性了, 引入后不要忘记在setup函数中return出去, 这样在页面中我们就可以用 封装好的变量以及方法了

import { rickFun, typescript } from "../../plugins/common";

export default defineComponent({
  component: {},
  name: "",
  setup() {
    const store = useStore();
    const { pageData,computedData, ...methods } = rickFun(); // 在这
    const study = typescript();
    const classObject:any = computed(()=>{
      return{ 
        active2:pageData.activeIndex%2===0,
        active:pageData.activeIndex%2!==0
      }
    })
    onMounted(() => {
      console.log("组件挂载到页面之后执行");
    }); // 组件挂载到页面之后执行-------onMounted
    return {
      // 因为setup是一个函数，函数是有自己的作用域的，本函数内的作用域外部无法访问到,所以需要return出去
      ...toRefs(pageData),
      ...methods,
      store,
      classObject
    };
  },
});

最后附上我的demo效果图

这就是我封装公共逻辑使用的方法 希望各位多多指教