vue3.0 TypeScript 导入axios和this 的使用

吐槽：

对于使用者来说我还是喜欢弱类型，js这么简单的东西干嘛搞个强类型，天下乌鸦一样黑了  

1、this的使用

vue3 中直接使用this 会报错，可以通过VUE 提供的getCurrentInstance() 方法获取当前app对象

代码示例：

export default defineComponent({
  name: 'editor',
  components: {
    ...
  },
  setup() {
    const { ctx } = (getCurrentInstance() as any);
    const onCheck = (checkedKeys: Record<any, any>)=>{
      ctx.checkedKeys = checkedKeys;
    }
    
    return {
     onCheck
    }
  },
})

醒悟：vue3使用的是Typescript,使用类的方式操作属性，所以其实修改类变量就好，不需要使用this，vue2.0过度行为

2、axios 的导入

vue3 中由于使用ts无法将axios直接挂到vue属性上，通过扩展全局自定义属性接口可以像vue2一样使用

main.ts代码示例：

import {AxiosInstance } from "axios";
import Axios from "axios";

//全局配置Axios
declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
      $axios: AxiosInstance;
    }
}
app.config.globalProperties.$axios=Axios;  //this.Axios

使用：

ctx.$axios.post('/admgr/infoProgramGroup/list.json')
      .then(function (response: any) {
        console.log(response);
        const random = Math.random().toString(36).substring(2, 6);
        response.data.data.forEach((element: any) => {
          treeData1.value.push({
          id: element.pgroupId,
          pId: element.parentId,
          value: random,
          title: element.groupName,
          });
        });
        
      })
      .catch(function (error: any) {
        console.log(error);
      });

以上都是延续vue2 的使用风格