在 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。

基于js lint 和/或jquery style guide 的规范方法是什么？是否有其他权威机构可供考虑？

Answer 1

delivery-methods/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'，这让我可以简单地使用例如DeliveryMethods.COLLATION。我可以清楚简单地导出/导入任意数量的常量。仍然在 Javascript 模块中摸索！

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

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

这样效果更好。