VUE3新特性hook

• 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2中的mixin。

• 自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。下面举例说明

• 在新建的hook文件夹下新建index.ts，定义了两个请求方法

  /*
   * @description: 自定义 ts
   * @Author: yp
   * @Date: 2024-01-27 
   * @LastEditors: yp
   * @LastEditTime: 2024-01-27
   */
  // 【自定义hook】
  // 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装，类似于vue2.x中的mixin。
  
  // 自定义hook的优势：复用代码, 让setup中的逻辑更清楚易懂。
  import { reactive, onMounted, getCurrentInstance } from 'vue'
  import { useStore } from "vuex";
  export default function () {
        //使用全局方法
      const { proxy }: any = getCurrentInstance();
          const store = useStore(); //获取store对象
       const login = () => {
        proxy.$apiPost
          .exportPost("/sale/statement/selects", {})
          .then((res) => {
            console.log(res.rows);
            //使用vuex存储数据
            store.commit("changeDataList", res.rows);
          })
          .catch((error) => {
            console.log(error);
          });
      };
    
      console.log(proxy.$util);
      //vuex异步修改数据
      const changeBillList = () => {
        proxy.$apiPost
          .exportPost("sale/soBill/selects", {})
          .then((res) => {
            console.log(res.rows);
            //使用vuex存储数据
            store.dispatch("searchBill", res.rows);
          })
          .catch((error) => {
            console.log(error);
          });
      };
  	
  //   //向外部暴露数据
    return {login,changeBillList}
  }

  新建index.vue的文件中引入index.ts使用其中定义的方法