在Vue.js中定义公共常量的最佳方法是什么？

Question

我正在使用单个文件组件开发几个Vue应用程序.我发现我的很多组件需要公共配置信息,例如包含传递方法的对象,我可能会这样定义:

const DeliveryMethods = {
  DELIVERY: "Delivery",
  CARRIER: "Carrier",
  COLLATION: "Collation",
  CASH_AND_CARRY: "Cash and carry"
}

什么是使我的组件可用的最简单最简单的方法？目前,我已经使用'config.js'文件完成了它,如下所示:

export default {

  DeliveryMethods: {
    DELIVERY: "Delivery",
    CARRIER: "Carrier",
    COLLATION: "Collation",
    CASH_AND_CARRY: "Cash and carry"
  }

}

在我需要它的组件中,我有import config from 'src/config.js',并且我想在其中使用其中一个,我将参考例如,config.DeliveryMethods.CASH_AND_CARRY.这在我看来相当冗长和重复,但我更愿意能够使用DeliveryMethods.CASH_AND_CARRY而不是config.DeliveryMethods.CASH_AND_CARRY.其他人用什么来完成这个？

Answer 1

递送方法/ index.js

const DELIVERY = "Delivery"
const CARRIER = "Carrier"
const COLLATION = "Collation"
const CASH_AND_CARRY = "Cash and carry"

export default {
  DELIVERY: DELIVERY,
  CARRIER: CARRIER,
  COLLATION: COLLATION,
  CASH_AND_CARRY: CASH_AND_CARRY
}

用法

import DeliveryMethods from './path/to/delivery-methods'

console.log(DeliveryMethods.CARRIER)

要么:

config.js

export default Object.freeze({
  DELIVERY: "Delivery",
  CARRIER: "Carrier",
  COLLATION: "Collation",
  CASH_AND_CARRY: "Cash and carry"
})

用法:

import DeliveryMethods from './path/to/delivery-methods'

console.log(DeliveryMethods.CARRIER)

Answer 2

谢谢，这和subhaze的评论为我指明了正确的方向。DeliveryMethods不是我要使用的唯一常量，因此export default如果我想将所有常量都放在一个文件中以方便维护，则该方法不起作用。我所做的是：

export const DeliveryMethods = {
    DELIVERY: "Delivery",
    CARRIER: "Carrier",
    COLLATION: "Collation",
    CASH_AND_CARRY: "Cash and carry"
};

在我的组件中import {DeliveryMethods} from 'src/config.js'，这使我可以简单地使用eg DeliveryMethods.COLLATION。我可以清楚，简单地导出/导入任意数量的常量。仍然对Java语言模块感到困惑！

稍后：根据WaldemarIce的建议，我将其更改为：

export const DeliveryMethods = Object.freeze({
    DELIVERY: "Delivery",
    CARRIER: "Carrier",
    COLLATION: "Collation",
    CASH_AND_CARRY: "Cash and carry"
});

效果更好。