Vue.js中定义公共常量的规范方法？

我正在开发几个使用单文件组件的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"
  }

}

在我需要它的组件中，我有从'src/config.js'导入配置的

，

，在我想使用其中一个的地方，我将参考例如

config.DeliveryMethods.CASH\u和\u CARRY

。不过，在我看来，这似乎有点冗长和重复，我更愿意只使用

DeliveryMethods.CASH\u和\u CARRY

，而不是

config.DeliveryMethods.CASH\u和\u CARRY

---

基于和/或的标准化方法是什么？是否有其他部门需要考虑？

< P>交货方式/指标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
}

用法

或：

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)

---

谢谢，这和subhaze的评论为我指明了正确的方向。DeliveryMethods不是我想使用的唯一常量，因此如果我想将所有常量都放在一个文件中以便于维护，那么导出默认值就不起作用。我所做的是：

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

在我的组件中，我从'src/config.js'导入了{DeliveryMethods}，这允许我简单地使用例如

DeliveryMethods.COLLATION

。我可以清楚、简单地导出/导入任意数量的常量。仍然在摸索Javascript模块

后来：根据WaldemarIce的建议，我将此更改为：

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

---

如果你只想要

DeliveryMethods.CASH\u AND_CARRY

为什么不直接导出POJO而不需要额外的

DeliveryMethods:{…}

范围，然后只导出

{DELIVERY:“DELIVERY”，…}

部分；然后从“/src/config.js”导入DeliveryMethods？谢谢，这和subhaze的评论为我指明了正确的方向。DeliveryMethods不是我想使用的唯一常量，因此如果我想将所有常量都放在一个文件中以便于维护，那么导出默认值就不起作用。我所做的是：有没有其他方法可以在每个vue文件中导入我们想要使用该常量的文件？如果尝试重新定义

DeliveryMethods.DELIVERY='bla'

。我知道，即使对象本身已通过

const

声明，我也可以改变对象的属性，因此，对象不是不变的。在将常量分配给对象属性之前，通过

const

声明常量本身可以防止这种情况。但这比我想用的方式要详细一点，我把我用的方式看作是一种约定——带有大写属性的标题大小写对象名意味着它是一个带有常量的对象，所以不要篡改！好的，我明白了，但是为什么不对Object.freeze（）使用第二个选项呢？它不是那么冗长，它模拟常量，您无法更改冻结对象的属性。谢谢，我现在已更改了答案，按照您的建议使用object.freeze（）。两全其美。嗯。。。我试过你的建议，但它对我不起作用？DeliveryMethods对象最终未定义。如何在Vue组件中引用它？

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