Vue.jsで一般的な定数を定義する最も良い方法は？

Question

私は1つのファイルコンポーネントを使用して2つのVueアプリを開発しています。私は私のコンポーネントのかなりの数は、一般的な設定情報を必要と見つける、例えば配信方法を含むオブジェクトは、私はこのように定義する可能性があります：

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

は何neatest、私のコンポーネントにそれを利用できるようにする最も簡単な方法でしょうか？私は、

私はそれを必要とする私のコンポーネントで

export default { 

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

} 

、私はimport config from 'src/config.js'を持っている、と私はこれらのいずれかを使用する場所：現時点では、私は以下のように、「config.jsの」ファイルでそれを行っています例えば、config.DeliveryMethods.CASH_AND_CARRYを参照してください。これは私にはむしろ長らく反復しているようですが、私はconfig.DeliveryMethods.CASH_AND_CARRYの代わりにただDeliveryMethods.CASH_AND_CARRYを使用できるようにしたいと考えています。これを達成するために他人は何を使用していますか？

Answer 1

送達方法/ 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は私が使用したい唯一の定数ではないので、メンテナンスを容易にするためにすべての定数を1つのファイルにまとめたい場合はexport defaultが機能しません。私は私が単に例えば使用することができますimport {DeliveryMethods} from 'src/config.js'を、持っている私のコンポーネントで

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

：私がやったことはこれですDeliveryMethods.COLLATION。任意の数の定数を明確かつ簡単にエクスポート/インポートできます。まだ私の方法は、Javascriptモジュールの周りを感じて！

はLATER：良い作品

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

：WaldemarIceの提案に続いて、私はこれを変更しました。