［vue.js］グローバルメソッドを使って、共通部分を表示させる方法

どうも松井です。

週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。

同じ関数や変数などを呼び出す場合、mixinを使えば、どのコンポーネントでも「this.〜」の形で呼び出す事が可能です。

mixinsはカンタンに実装できますので安心して進めていきましょう。

では早速手順に入っていきます。

mixinsフォルダを作成

まずは、mixinsフォルダを作成して、その中に共通化するためのファイル(globalValiables.js)を作成します。作成するディレクトリはsrc配下に作成します。

src
....
mixins
 globalValiables.js

globalValiables.jsに共通化したいグローバル関数を定義する

では、globalValiables.jsに必要に応じて関数を定義していきます。

export default {    // exportする
   created() {
       console.log('start! from mixins.')    // 起動後必ずログが出力される
   },

   data() {
       return {
           serverPass: "https://localhost:10443/",    // サーバーサイドのパスを定義
       }
   },

   methods: {
       logging() {
           console.log('logging from mixins.')
       }
   },

   computed: {
       twoBytwo() {
           return 2 * 2
       }
   }
}

自分の場合は、下記のような共通関数を作成しました。

export default {
   computed:{
       dailyTotalTime() {
         return this.calcWorKTime();
       },
   },
   methods: {
       calcWorKTime(){
           const startTimeArray = this.startTime;
           const stopTimeArray = this.stopTime;
           const BreakTimeArray = this.breakTime;
           
           const [resultStartHour, resultStartMinute] =startTimeArray.split(':');
           const [resultBreakHour, resultBreakMinute] = BreakTimeArray.split(':');
           const [resultStoptHour, resultStopMinute] = stopTimeArray.split(':');
   
           return (resultStoptHour - resultStartHour - resultBreakHour + (resultStopMinute - resultStartMinute - resultBreakMinute) / 60.0);
       }
     }
}

こちら、前回の記事のmounted()部分の記述です。詳しく内容を下記人したい方はこちらで確認できます。

mixinに登録する

ここで終わりではありません。きちんとインスタンス作成前にmixinに下記を追加して読み込みます。

main.js

 import gv from '../mixins/globalValiables' 
 Vue.mixin(gv)   

ちなみに私の場合はsrc配下にある、resources/app.jsに書いています。app.jsでメインのvueファイルを読み込んでいます。

app.js

require('./bootstrap');
window.Vue = require('vue');
import gv from '../../mixins/globalValiables' 
Vue.mixin(gv)   

Vue.component('main-container', require('./components/MainContainer.vue').default);

const app = new Vue({
   el: '#app',
});

これで、別のコンポーネントファイルで「this.〜」の形で利用する事ができます。

参考記事

mixinでグローバル定義【Vue.js】 - 技術向上