【Vue.js】mixinを使ってグローバルメソッドを定義する

【Vue.js】mixinを使ってグローバルメソッドを定義する

今回はVue.jsの各コンポーネントで使用するグローバルメソッドの導入方法を解説します。
ここではグローバルミックスインを使った手法を使います。

目次

グローバルメソッドの定義
ミックスイン設定
グローバルメソッドを使う

グローバルメソッドの定義

グローバルメソッドを定義します。
今回は、sessionStoargeを使うためのメソッドをグローバルメソッドとして用意したいと思います。

src/utils/session.js

export default {
    methods: {
        /**
        * セッションストレージから値を取得します。 
        * @param sessionKey : セッションストレージのkey
        * @return data : セッションストレージから取得される値
        */
        getSession : function(sessionKey) {
            
            // ストレージからデータを取得（データが存在しない場合は空の配列を用意）
            var data = JSON.parse(sessionStorage.getItem(sessionKey));
            if (data == null) {
                var data = [];
            }
            return data;
        },

        /**
        * セッションストレージに値を保存します。 
        * @param sessionKey : セッションストレージのkey
        * @param data : 保存する値
        */
        saveSession : function(sessionKey,data) {
            sessionStorage.setItem(sessionKey, JSON.stringify(data));
        },

        /**
        * セッションストレージから該当する値を削除します。 
        * @param sessionKey : セッションストレージのkey
        * @param index : 削除する箇所
        */
        deleteSession : function(sessionKey,index) {
            
            // 該当箇所のデータを削除して上書き
            var data = getSession(sessionKey);
            data.splice(index, 1);
            saveSession(sessionKey,data);
        },

        /**
        * セッションストレージから全ての値を削除します。 
        * @param sessionKey : セッションストレージのkey
        */    
        deleteAllSession : function(sessionKey) {
            sessionStorage.removeItem(sessionKey);
        }
    }
}

これをどのコンポーネントからも使用できるようにミックスインの設定を行います。

export default { methods: { グローバルメソッド } } とする

ミックスイ設定

ミックスインの設定はVueインスタンス作成前に行います。

// グローバルメソッドのインポート 
import session from './utils/session'

// グローバルメソッドのグローバルミックスイン
Vue.mixin(session)

new Vue({
  el: '#app'
})

これで使えるようになりました。

グローバルメソッドを使う

では上記で用意したグローバルメソッドを使ってみましょう。
今回は用意したメソッドの内、sessionを保存するための「saveSession」を使ってみます。
他のメソッド同様に「this」をつけて利用します。

Test.vue

<template>
	<!-- 省略 -->
</template>

<script>
export default {
  name: 'Test',
  mounted : function(){
      // グローバルメソッドの利用
      this.saveSession('testSession', 'test');
  }
}
</script>

このように使えます。
以上で終わりです。ぜひ試してみて下さい。