Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

Like the title, I want to add Axios into Vue prototype. So when I want to use it, I can use it like this.$axios instead of importing it every time.

CODE:

//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') 

However, there is a problem when I try to use it like this: this.$axios.

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

How could I fix this problem?

like image 471
R.Q Avatar asked Dec 07 '20 15:12

R.Q


People also ask

How do you access global variables in Vue 3?

So if you're using the Options API you'll be able to access them using this. $myGlobalVariable , just like you could with Vue. prototype . They'll also be available in the template without the this. , e.g. {{ $myGlobalVariable }} .

What is Vue prototype?

prototype. To create a global property in your Vue application and then access it through a property statement instead of an import statement, Vue provides a platform we call prototypes.


2 Answers

You could use provide/inject or define a global config property, which replaces Vue.prototype in Vue 3:

1. provide/inject (for Composition or Options API)

Provide

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

Inject

Composition API:

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

Options API:

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

2. Global config (for Options API)

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

Options API:

this.$axios 

Note: This is only for the Options API. Evan You (Vue creator) says: "config.globalProperties are meant as an escape hatch for replicating the behavior of Vue.prototype. In setup functions, simply import what you need or explicitly use provide/inject to expose properties to app."

like image 116
Dan Avatar answered Oct 07 '22 17:10

Dan


There is a way to use globalProperties inside a setup function. Although this might be considered an anti-patter. It would be better to use provide/inject if possible. But if there is a library that uses globalProperties and you really need to access it from setup this is how you could do it.

<script setup>     import { getCurrentInstance } from 'vue'      const app = getCurrentInstance()     const progressBar = app.appContext.config.globalProperties.$Progress      progressBar.start() </script> 
like image 32
Martin Zeltin Avatar answered Oct 07 '22 16:10

Martin Zeltin