为所有 vue 组件重用一个 js 文件，而不在每个 [重复] 中导入

【问题标题】：Reuse a js file for all vue components without importing in each [duplicate]为所有 vue 组件重用一个 js 文件，而不在每个 [重复] 中导入
【发布时间】：2021-09-19 05:19:47
【问题描述】：

我有一个名为 Constant.js 的 js 文件，其中包含所有 API 名称。

//Constant.js
export default {
    api1: 'api1',
    api2: 'api2',
    ...
    ...
    ...
}

如何在不将其导入应用程序中的每个 Vue 组件的情况下使用此文件？

【问题讨论】：

将您的constant 对象添加到窗口对象并在任何地方使用它
刚刚找到一个可能的重复项：What is the best way to declare global variable in Vue.js?，特别是this answer，这基本上就是我在下面写的。

标签： javascript vue.js

【解决方案1】：

虽然将数据直接添加到您的Window 对象绝对是一种选择，但最“Vueish”的方法是将您的数据对象导入main.js（或等效）和create an instance property，将其添加到Vue 原型：

main.js

import global_constants from `./Constants`;

... // Other imports, Vue.use, Vue.component, etc.

Vue.prototype.$global_constants = global_constants; // Adds object to Vue's prototype

new Vue({
... // Create Vue instance with desired config etc.
});

这将使所有通过this.$global_constants 附加到该实例的子组件都可以访问该数据。

名称本身是任意的，可以是您喜欢的任何名称，开头的$ 是所有实例属性的Vue's naming convention。

【讨论】：