时间戳

首页 > 解决方案 > 设置可通过此访问的动态变量。来自 VueJS 中的外部文件不起作用

javascript - 设置可通过此访问的动态变量。来自 VueJS 中的外部文件不起作用

问题描述

我有一个只包含定义的 settings.js 文件：

export default {
  maintenanceMode: 'yeahhhhh',
  enableRegister: false,
}

例如，为了通过 this.$maintenanceMode 在我的应用程序中的任何地方使用这些设置，我将这个完美地工作在我的 main.js 中：

 Vue.prototype.$maintenanceMode = globalSettings.maintenanceMode
 Vue.prototype.$enableRegister = globalSettings.enableRegister

但是当我尝试在 main.js 中像这样动态分配值时：

for (const [key, value] of Object.entries(globalSettings)) {
  Vue.prototype['$' + key] = globalSettings[value]
  })
}

或像这样：

for (const [key, value] of Object.entries(globalSettings)) {
  Object.defineProperty(Vue.prototype, '$' + key, {
    value: globalSettings[value],
  })
}

this.$maintenanceMode 未定义...

有没有人已经做过类似的事情或者可以指出我的错误在哪里？

标签： javascriptvue.js

解决方案

您不必这样做：

 Vue.prototype.$maintenanceMode = globalSettings.maintenanceMode
 Vue.prototype.$enableRegister = globalSettings.enableRegister

只需在需要的地方从 settings.js 文件中导入这些常量：

import * as settings from './settings'

EDIT >>> You can always assign variables to 'window' object, in order to reach them globally: https://stackoverflow.com/questions/11148997/window-variablename#:~:text=When%20a%20global%20variable%20is,can%20direct%20set%20window%20variable.&text=so%20when%20you%20declare%20a,value%20as%20a%20property%20value.

but the way I suggested at first is widely accepted way of handling global constants in JavaScript

推荐阅读