如何在 Vue 3 中使用 Vue.prototype 或全局变量？

Question

如题，想在Vue原型中加入Axios。所以当我要用的时候，可以像this.$axios那样使用，而不是每次都导入

代码：

//plugins/axios.ts

import axios from 'axios'
import router from '../router/index'

const errorHandle = (): void => {};

const instance = axios.create({
  // baseURL: process.env.NODE_ENV == 'development' ? '' : ''
  baseURL: 'http://localhost:3000',
  timeout: 1000 * 12
});

instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

export default instance

import { createApp } from 'vue'
import App from './App.vue'
import installElementPlus from './plugins/element'
import instance from './plugins/axios'
import router from './router'

const app = createApp(App).use(router)
installElementPlus(app)
// app.config.globalProperties.http = instance
app.config.globalProperties.$axios= instance
app.mount('#app')

但是，当我尝试这样使用它时出现了问题：this.$axios。

TS2339: Property '$axios' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'.

我该如何解决这个问题？

Answer 1

您可以使用 provide/inject 或定义一个全局配置属性，它取代了 Vue 3 中的 Vue.prototype：

1。 `provide`/`inject`（组合或选项 API）

提供

import axios from 'axios';

const app = Vue.createApp(App);
app.provide('$axios', axios);  // Providing to all components during app creation

注入

作文API:

const { inject } = Vue;
...
setup() {
  const $axios = inject('$axios');   // injecting in a component that wants it
  // $axios.get(...)
}

选项API:

inject: ['$axios'],   // injecting in a component that wants it

2。 Global config（选项 API）

import axios from 'axios';

const app = Vue.createApp(App);
app.config.globalProperties.$axios = axios;

选项API:

this.$axios

^{注意：这仅适用于选项 API。 Evan You（Vue 创作者）says：“config.globalProperties 是复制 Vue.prototype 行为的逃生口。在 setup 函数中，只需导入您需要什么或明确使用 provide/inject 将属性公开给 app."}

Answer 2

有一种方法可以在设置函数中使用 globalProperties。尽管这可能被认为是一种反模式。如果可能，最好使用provide/inject。但是，如果有一个使用 globalProperties 的库，并且您确实需要从设置中访问它，那么您可以这样做。

<script setup>
    import { getCurrentInstance } from 'vue'

    const app = getCurrentInstance()
    const progressBar = app.appContext.config.globalProperties.$Progress

    progressBar.start()
</script>

如何在 Vue 3 中使用 Vue.prototype 或全局变量？

How to use Vue.prototype or global variable in Vue 3?

javascript

vue.js

axios

vuejs3

1。 `provide`/`inject`（组合或选项 API）

2。 Global config（选项 API）

如何在 Vue 3 中使用 Vue.prototype 或全局变量？

How to use Vue.prototype or global variable in Vue 3?

javascript

vue.js

axios

vuejs3

1。 provide/inject（组合或选项 API）

2。 Global config（选项 API）

1。 `provide`/`inject`（组合或选项 API）