Vue3全局变量的定义和使用

Vue3 的全局变量目前百度前面的全部是采用先

app.config.globalProperties.$axios = $axios

随后利用 getCurrentInstance 取得 ctx 或 proxy 来获取全局变量的

const { ctx } = getCurrentInstance() as any
//ctx.$axios.get

1
2

但事实上官方是不建议应用使用 getCurrentInstance 方法的，所以我更加推荐以下的方法去存储和获取全局变量，即依赖注入的方式

首先在 main.js 中

const app = createApp(App)
 
// 配置全局变量 页面中使用 inject 接收
app.provide('global',{
  store,
  axios
})
 
app.mount('#app')

1
2
3
4
5
6
7
8
9

将多个变量混同时注入的目的是为了减小依赖注册及接受的工作量

在需要接受的页面使用 inject 接受（js项目请去掉类型声明）

<script lang="ts" setup>
import { inject } from 'vue';
 
// 获取全局对象`
const global:any = inject('global')
 
/**目前标准异步写法 */
global.axios('/harmony/getType').then((result:any) => {
  if(result.success){
    list.value = result.data
  }
}).catch((err:any) => {
  console.log(err);
});
 
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

采用这种方法在全局变量的创建上会更加的方便，而且不用担心会出现像axios在使用globalProperties设置为全局对象后丢失$axios对象只剩$http之类的问题。

#Vue

上次更新: 2024/01/30, 00:35:17

← Vue3.x 组件通信方式 Vuex使用记录→