vue.js - 如何在整个 Vue.js 3 项目中包含一个可用的库？

Question

根据this blog post在 Vue.js 2 中包含常用库(例如 axios)的正确方法是将它们设置为 Vue 原型(prototype)对象的属性，如下所示:

import axios from 'axios';
Object.defineProperty(Vue.prototype, '$axios', { value: axios });

不幸的是，这种方法不再适用于 Vue.js 3。那么在整个项目中导入库的正确方法是什么？我不希望将它们设置为全局变量(即 window 对象。)

Answer 1

使用提供/注入(inject)作为替代

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios';
    
const app = createApp(App)
app.provide('axios', axios ) // <-- define here
app.mount('#app')

然后在您想使用 axios 的任何组件中，您都可以这样做

app.component('todo-list-statistics', {
  inject: ['axios'],
  created() {
    this.axios // --> Injected property
  }
}