The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

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

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

f:id:duo-taro100:20160218004611p:plain

今回は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>

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