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

问题描述

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

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

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

解决方法

使用提供/注入作为替代

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
  }
}

,

我认为在vue 3项目中为我们提供库的最好方法是使用依赖注入 https://v3.vuejs.org/guide/component-provide-inject.html

但是，我只是建议您将库导入真正需要的地方，以具有更准确的智能感知和更好的三摇动