在 Vue.js 中定义通用常量的规范方法? [英] Canonical way to define common constants in Vue.js?

问题描述

我正在使用单个文件组件开发几个 Vue 应用程序.我发现我的很多组件都需要通用配置信息，例如一个包含我可以这样定义的交付方法的对象:

I'm developing a couple of Vue apps using single file components. I find quite a few of my components require common config information, for example an object containing delivery methods which I might define like this:

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

让我的组件可以使用它的规范方法是什么?目前，我已经完成了一个文件config.js"，如下所示:

What is the cannonical way to make that available to my components? At the moment, I have done it with a file 'config.js', as below:

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.

In my components where I need it, I have import config from 'src/config.js', and where I want to use one of these, I'll refer to e.g., config.DeliveryMethods.CASH_AND_CARRY. This seems to me rather long-winded and repetitive, though, and I'd prefer to be able to use just DeliveryMethods.CASH_AND_CARRY instead of config.DeliveryMethods.CASH_AND_CARRY.

基于 js lint 和/或 jquery 风格指南?还有其他权威机构需要考虑吗?

What is the canonical way to based on js lint and/or the jquery style guide? Are there any other authorities to consider?

推荐答案

delivery-methods/index.js

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)

这篇关于在 Vue.js 中定义通用常量的规范方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！