何回も使う関数を、いつでもどこでも呼び出したい。。。

皆さん、何度も使う関数を使う度にメソッドで定義するのは面倒ですよね。

今回は、Vue.jsで「いつでも、どこでも実行できる関数」があったら便利だなと思ったので備忘録として残していきます。

モジュールのインストールなども無く、驚くほど簡単なので、是非学習の参考にしてください！！！

それでは説明していきます！

フォルダ、ソースファイルを作成#

srcディレクトリの中に、任意のフォルダと関数を書いていくソースファイルを作成します。
今回フォルダは「mixin」、ソースファイルは「globalMethods.js」とします。

cd src
md mixin
cd mixin
copy nul globalMethods.js

そして、globalMethods.jsに何度も使う関数を定義します。

globalMethods.js

export default {
  methods: {
    initFacebook() {
      window.fbAsyncInit = function() {
        window.FB.init({
          appId: "685243755466253", //アプリID
          status: true,
          cookie: true,
          xfbml: true,
          version: "v9.0",
        });
      };
      console.log("init完了");
    }
}

今回は、FacebookSDKでよく使うFB.init()を例に挙げていきます。

次に、main.jsにて今作ったファイルをインポートします。

import Vue from "Vue";
import gv from "../src/mixins/globalMethods";

Vue.mixin(gv);

これで、initFacebook()をいつでも呼び出すことができます。

実際に呼び出すと以下のようになります。

App.vue

<template>
  <div id="app"> 
      <router-view/>
  </div>
</template>

<script>
  export default{
   async created() {
      await this.initFacebook();  //初期化
    }
  }
</script>

以上、「いつでも、どこでも実行できる関数」の紹介でした！

良かったら、LGTM、コメントお待ちしております。

また、何か間違っていることがあればご指摘頂けると幸いです。

Thank you for reading