Vueインスタンス内にあるコンポーネントオプションを別ファイルに移植してモジュール化する方法(メモ)

タイトルにあるように、Vueインスタンス内のコード量が大きいプロジェクトでは膨れ上がってしまうので、別ファイルに記述し活用する方法をメモする。

まず、[Xxxxxx.vue]ファイルにあるコンポーネントオプションを外部ディレクトリのjsファイルに移植する。

jsファイルは2つ用意すると良い。

  • import 名前 from ‘ファイル名’とexport default {} を用意し、実際にページ側から呼び出す一連の処理をまとめたメソッドを記載するファイル(コード量は少なくなる)
  • export default {} を用意し、内部で使用するインターフェイスを記載するファイル(コード量は多い)

※注意点

  • ここはVue.jsインスタンスではなく単純なObjectなので methods で括る必要はない
  • ページの固有メソッドは持ってきてはいけない

また、mixinsはVueインスタンスなのでcomputedやmethodsで括る必要がある。

↑厳密に言うと、VueインスタンスにマージされるObjectということである。

TOP