Façon canonique de définir les constantes communes dans Vue.js ?

Question

Je développe quelques applications Vue à l'aide de composants à fichier unique. Je trouve qu'un bon nombre de mes composants nécessitent des informations de configuration communes, par exemple un objet contenant des méthodes de livraison que je pourrais définir comme ceci :

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

Quelle est la façon canonique de mettre cela à la disposition de mes composants ? Pour l'instant, je l'ai fait avec un fichier 'config.js', comme ci-dessous :

export default {

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

}

Dans mes composants où j'en ai besoin, j'ai import config from 'src/config.js' et lorsque je veux utiliser l'un d'entre eux, je me référerai par exemple à , config.DeliveryMethods.CASH_AND_CARRY . Cela me semble cependant assez long et répétitif, et je préférerais pouvoir utiliser seulement DeliveryMethods.CASH_AND_CARRY au lieu de config.DeliveryMethods.CASH_AND_CARRY .

Quelle est la manière canonique de se baser sur js lint et/ou le guide de style jquery ? Y a-t-il d'autres autorités à prendre en compte ?

Answer 1

Méthodes de livraison/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
}

Utilisation

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

console.log(DeliveryMethods.CARRIER)

Ou :

config.js

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

Utilisation :

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

console.log(DeliveryMethods.CARRIER)

Answer 2

Merci, ceci et le commentaire de subhaze m'ont mis sur la bonne voie. DeliveryMethods n'est pas la seule constante que je voudrais utiliser, donc export default ne fonctionne pas si je veux avoir toutes mes constantes dans un seul fichier pour faciliter la maintenance. Voici ce que j'ai fait :

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

Dans mes composants, j'ai import {DeliveryMethods} from 'src/config.js' ce qui me permet d'utiliser simplement, par exemple, les éléments suivants DeliveryMethods.COLLATION . Je peux exporter/importer un nombre quelconque de constantes de manière claire et simple. Je m'y retrouve encore dans les modules Javascript !

PLUS TARD : Suivant la suggestion de WaldemarIce, j'ai changé cela en :

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

Ça marche mieux.