Great question! Since Vue 3 swapped out the old global Vue constructor for the createApp API, that prototype trick from Vue 2 doesn't work anymore. Let's walk through a few clean, non-window-global ways to make libraries like axios accessible across your entire Vue 3 project:

1. Use app.config.globalProperties (Closest to Vue 2's Prototype Approach) #

This is the most direct replacement for the Vue 2 prototype method—it attaches the library to your app's global properties, making it available in all components.

Setup in main.js: #

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

const app = createApp(App)
// Attach axios to global properties
app.config.globalProperties.$axios = axios

app.mount('#app')

Access in Components: #

• Options API: Just use this like you did in Vue 2:

  <script>
  export default {
    mounted() {
      // Fetch data using the global axios instance
      this.$axios.get('/api/data')
        .then(res => console.log(res.data))
    }
  }
  </script>
  

• Composition API (with <script setup>): You'll need getCurrentInstance to access the proxy:

  <script setup>
  import { getCurrentInstance } from 'vue'
  
  const { proxy } = getCurrentInstance()
  // Use the global axios instance
  proxy.$axios.get('/api/data')
    .then(res => console.log(res.data))
  </script>
  

  Note: getCurrentInstance only works inside setup() or lifecycle hooks—avoid using it in regular functions.

2. Use Provide/Inject (Vue 3's Recommended Dependency Injection) #

This is a more flexible, scalable approach, especially for larger projects. You "provide" the library at the app level, then "inject" it wherever you need it.

Setup in main.js: #

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

const app = createApp(App)
// Provide axios to the entire app
app.provide('axios', axios)

app.mount('#app')

Access in Components: #

• Options API: Declare the injection in the component:

  <script>
  export default {
    inject: ['axios'], // Inject the provided axios instance
    mounted() {
      this.axios.get('/api/data')
        .then(res => console.log(res.data))
    }
  }
  </script>
  

• Composition API (with <script setup>): Use the inject function:

  <script setup>
  import { inject } from 'vue'
  
  // Inject the axios instance (add a default value if needed)
  const axios = inject('axios', null)
  if (axios) {
    axios.get('/api/data')
      .then(res => console.log(res.data))
  }
  </script>
  

3. Create a Reusable Composable (Best for Composition API-First Projects) #

This approach aligns with Vue 3's composable pattern—you wrap your library (and any custom config) in a reusable function, then import it wherever you need it.

Create a Composable File (composables/useAxios.js): #

import axios from 'axios'

// Create a custom axios instance with your project's config
const axiosInstance = axios.create({
  baseURL: 'https://your-api-base-url.com',
  headers: {
    'Content-Type': 'application/json'
  }
})

// Add interceptors or other custom logic here if needed
axiosInstance.interceptors.response.use(
  response => response,
  error => {
    console.error('API Error:', error)
    return Promise.reject(error)
  }
)

export function useAxios() {
  return axiosInstance
}

Use in Components: #

<script setup>
import { useAxios } from '@/composables/useAxios'

const axios = useAxios()
axios.get('/api/data')
  .then(res => console.log(res.data))
</script>

This method keeps your API config centralized and lets you add custom logic (like interceptors) in one place.

4. Integrate with Pinia (For State-Managed API Calls) #

If you're using Pinia for state management, you can wrap your API calls in store actions. This is perfect if you need to tie API responses to app state (like loading states or cached data).

Create a Pinia Store (stores/apiStore.js): #

import { defineStore } from 'pinia'
import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: 'https://your-api-base-url.com'
})

export const useApiStore = defineStore('api', {
  state: () => ({
    loading: false,
    data: null,
    error: null
  }),
  actions: {
    async fetchData() {
      this.loading = true
      try {
        const res = await axiosInstance.get('/api/data')
        this.data = res.data
        this.error = null
      } catch (err) {
        this.error = err.message
      } finally {
        this.loading = false
      }
    }
  }
})

Use in Components: #

<script setup>
import { useApiStore } from '@/stores/apiStore'

const apiStore = useApiStore()
// Call the action to fetch data and manage state
apiStore.fetchData()
</script>

<template>
  <div v-if="apiStore.loading">Loading...</div>
  <div v-else-if="apiStore.error">{{ apiStore.error }}</div>
  <div v-else>{{ apiStore.data }}</div>
</template>

内容的提问来源于stack exchange，提问作者valckmir