vue3 中挂载全局属性

1. 介绍

vue3 + TS, 挂载及声明全局属性

2. 示例

将 axios 挂载到 this.$http 上

2.1. 挂载

src/main.js:

import { App } from 'vue';
import axios from 'axios';

app.config.globalProperties.$http = axios;

2.2. 类型声明

src/typing.d.ts:

// 注意，扩展vue的接口需要先import vue进来, 不导入原来的环境进来，直接扩展的话，就不是扩展了，变成覆盖
import Vue from 'vue';


import type { AxiosStatic } from 'axios';

declare module '@vue/runtime-core' {
  // 扩展全局变量的接口内容，需要扩展ComponentCustomProperties这个接口，不要乱改成别的
  interface ComponentCustomProperties {
    $http: AxiosStatic,
  }
}

tsconfig.json:

{
  "include": [
    "src/typing.d.ts",
  ],
}

3. 参考

• vue3的全局变量挂载+ts的类型声明与使用 (opens new window)