私は単一ファイル コンポーネントを使用していくつかの 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 リントおよび/または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)