Vue.js で共通定数を定義する標準的な方法は何ですか? [closed] 質問する

2024-07-05 • tag-icon

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"
  }

}

必要なコンポーネントにはがありimport config from 'src/config.js'、これらのいずれかを使用したい場合は、たとえばを参照します。ただし、これは冗長で繰り返しが多いように思われるため、の代わりにconfig.DeliveryMethods.CASH_AND_CARRYだけを使用できればよいと思います。DeliveryMethods.CASH_AND_CARRYconfig.DeliveryMethods.CASH_AND_CARRY

標準的な方法は何ですか？js リントおよび/またはjQuery スタイルガイド他に考慮すべき当局はありますか?

ベストアンサー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)

ベストアンサー1

おすすめ記事