Vue3使用全局函数或变量的两种常用方式

置顶 theMuseCatcher

已于 2023-03-03 09:27:30 修改

阅读量9.9k

点赞数 14

分类专栏： ts Vue2 文章标签： vue.js 前端 javascript

于 2023-03-02 16:07:58 首次发布

本文链接：https://blog.csdn.net/Dandrose/article/details/129302786

版权

ts 同时被 2 个专栏收录

75 篇文章 4 订阅

订阅专栏

39 篇文章 5 订阅

订阅专栏

文章介绍了如何在Vue应用中全局注册并使用getAction函数。方法一是通过依赖注入，在main.ts中提供getAction，然后在需要的组件中使用inject来注入。方法二是利用app.config.globalProperties，将getAction添加到全局属性中，通过getCurrentInstance访问。这两种方式都能实现getAction在应用内的全局调用。

摘要由CSDN通过智能技术生成

例如：想要在index.ts中创建getAction函数，并可以全局使用：

import { http } from '@/utils/axios'
export function getAction (url: string, params: object) {
  return http.request({
    url: url,
    method: 'get',
    params: params
  })
}

方式一：使用依赖注入（provide/inject）

在main.ts中进行挂载：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
import { getAction } from 'index'
app.provide('getAction', getAction) // 将getAction方法挂载到全局

app.mount('#app')

在要使用的页面注入：

<script setup lang="ts">
import { inject } from 'vue'
const getAction: any = inject('getAction')
</script>

方式二：使用 app.config.globalProperties 和 getCurrentInstance()

app.config.globalProperties：一个用于注册能够被应用内所有组件实例访问到的全局属性的对象
getCurrentInstance()：// 获取当前实例，类似于vue2的this

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
import { getAction } from 'index'
app.config.globalProperties.$getAction = getAction

app.mount('#app')

在要使用的页面中使用：

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const { proxy }: any = getCurrentInstance()
console.log('proxy:', proxy)
console.log('getAction:', proxy.$getAction)
</script>