Vueはコンポーネントでページを構成するフレームワークなのでグローバルな関数や変数というのは基本的には使わないと思われる。データのやり取りはpropsやeventで行うが、グローバル関数が欲しい場合もある。
Vueにはmixinという仕組みもあるみたいだが、これはVueコンポーネントにフックするために使うようで、プラグインなどにも影響するようなので、もっと普通のグローバルな関数を定義したい。
public/index.htmlにjavascriptを置いてもいいがここではvueらしくimportを使って行う。
まずはsrc/global.jsを新規に作成して、ここにグローバルな関数や変数を書く。
1 2 3 4 5 6 7 |
const DEBUGGING = true export var dtrace; if (DEBUGGING) { dtrace = console.log; } else { dtrace = function() {}; } |
ここではdtraceをexportしている。
つぎにコンポーネントでこれをインポートして使う。
1 2 3 4 |
... <script> import {dtrace} from '@/globalFunction' </script> |