vue3 composition api小记

背景

最近在重构项目，将项目从vue2升级dao vue3。

在vue2里面，对于逻辑重复代码，采取的做法是提取公共代码，通过mixins的方式混入。

在vue3里面，对于逻辑重复代码，则采取composition api 的一个方法。

项目

在项目升级过程中，计划将分页信息提取到公共文件里面。

import { ref } from "vue";
import { ElMessage } from "element-plus";

export default function () {
  let pageParams = ref({
    total: 0,
    current: 1,
    size: 10,
  });

  return {
    pageParams
  };
}

我的想法，是将分页相关的逻辑代码都卸载这个公共文件里面， 例如分页切换，重置代码。

问题

在执行过程中会在一个问题，就是分页切换后需要调用查询接口，重置分页大小后也需要查询接口，每个页面查询不一样，不能够跟mixins一样，直接调用组件里面的代码。

解决方法

mixins能够自由调用组件里面的方式，存在着隐式依赖这个隐患， 很难推理谁调用谁。

composition api 可以通过显示传参解决这个问题，这样子就很清晰知道谁调用谁。 很简单的解决方法，不要被mixins的固有思维给困住了

import { ref } from "vue";
import { ElMessage } from "element-plus";

export default function () {
 // 分页
  let pageParams = ref({
    total: 0,
    current: 1,
    size: 10,
  });

  //  改变分页，然后调用查询接口
  const changePage = (val，fn) => {
    pageParams.value.current = val.current;
    pageParams.value.size = val.size;
    fn()
  };

  // 重置  form1=查询条件  fn1=回调函数
  const reset1 = (form1, fn1)=>{
    for (let k in form1) {
      form1[k] = "";
    }
    pageParams.value.size = 10;
    pageParams.value.current = 1;
    fn1();
    ElMessage.success("查询条件重置成功");
  }

  return {
    pageParams,
    changePage,
    reset1
  };
}