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

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