前提
js
1import Foo from "./Foo"
大量にある .vue のファイルすべてで上のように定義しています。
Foo は methods や computed のなかで参照します。
また .vue によっては <template>
の中で参照することもあり、その場合はあらかじめ data
または computed
で定義しておかないといけません。
とても冗長です。
実現したいこと
リファクタリングして一箇所だけで定義したいです。
試してみた方法
js
1import Vue from "vue" 2import Foo from "./Foo" 3 4// 方法1 5Object.defineProperty(Vue.prototype, "Foo", {value: Foo}) 6 7// 方法2 8Vue.mixin({ 9 data() { 10 return { 11 Foo, 12 } 13 }, 14}) 15 16// 方法3 17Vue.mixin({ 18 computed: { 19 Foo() { 20 return Foo 21 }, 22 }, 23})
3つの方法どれでも動きましたが、一般的な方法がわかりません。
- 方法1は、別のアプリに組み込んだときに、なぜか定義が消えていて、再定義しないといけなくなります。
- 方法2は、参照したいものが増えたときに、並べるだけでいいので簡単です。しかし、データは静的なので data に定義する意味がありません。リアクティブに対応しようと Vue が Foo を走査するため速度が遅くなる懸念もあります。
- 方法3は、2つも同じ名前
Foo
を書かないといけないのが冗長です。
一長一短あり、どの方法が一般的なのか識者の方に伺いたいです。
よろしくお願いします。