在 Vue.js 中定义通用常量的规范方法？ [关闭]

Posted 2023-02-22

【中文标题】在 Vue.js 中定义通用常量的规范方法？ [关闭]

【英文标题】：Canonical way to define common constants in Vue.js? [closed]

【发布时间】：2018-05-15 19:04:26

【问题描述】：

我正在使用单文件组件开发几个 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 的规范方法是什么？是否有其他权威机构可供考虑？

【问题讨论】：

如果你只想要DeliveryMethods.CASH_AND_CARRY，为什么不直接导出POJO，而不需要DeliveryMethods: ... 的额外作用域，只导出DELIVERY: "Delivery", ... 部分；然后import DeliveryMethods from "./src/config.js"?

【参考方案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)

【讨论】：

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

除了在我们想要使用该常量的每个 vue 文件中导入文件之外，还有其他方法吗？

OR 变体是否正确？当 config.js 没有定义 DeliveryMethods 时，如何导入 DeliveryMethods？

【参考方案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"
);

这样效果更好。

【讨论】：

尝试重新定义DeliveryMethods.DELIVERY = 'bla'会发生什么。

好吧，我知道即使对象本身已通过const 声明，我也可以改变对象的属性，因此该对象不是不可变的。在将常量分配给对象的属性之前，您通过const 声明常量本身可以防止这种情况发生。但这比我想那样做要冗长一些，而且我认为我这样做的方式是一种约定 - 带有大写属性的标题大小写对象名称意味着它是一个带有常量的对象，所以不要不要篡改！

好的，我明白了，但是为什么不使用 Object.freeze() 的第二个选项呢？它不是那么冗长，它模拟常量，你不能改变冻结对象的属性。

谢谢，我现在更改了答案，按照您的建议使用 Object.freeze()。两全其美。

嗯...我尝试了您的建议，但它对我不起作用？ DeliveryMethods 对象最终未定义。在 Vue 组件中怎么引用？