浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【Vue.js】定義を外から注入することでコンポーネントのコードを減らす

 Vue.jsはJavaScriptのフレームワークでページを部品単位で切り分けて定義することが得意です。一方、何かしらのモデル定義を作ったり、Vue.js用状態管理ツールVuexの定義する状態ストアの様にVue.jsの定義するコンポーネントの外に集約が存在するコードを書くこともあります。後者のパターンに入りながらもコンポーネントに囚われていると共通化すべき部分を個々のコンポーネントに重複して記述してしまう場合が出てきます。この記事ではそういった外部で共通化されたコードを注入する方法を紹介します。
 コードは次です。

// AppConfigStore.ts
/** 状態定義を記述したコードを省略 **/
export const lineColor = {
    // 簡素なsetter, getterを持つObjectを定義。このstoreに密に関わる部分のためstoreの役割にも合っている。
    /**
     * @return {number}
     */
    get() {
        return store.state.AppConfigStore.lineColor;
    },
    /**
     * @param {string} newColor
     */
    async set(newColor: string) {
        await store.dispatch('AppConfigStore/setLineColor', newColor);
    },
};
// Hoge.vue
import {lineColor} from '@/store/MapStore';
import Vue from 'vue';

Vue.extend({
    computed: {
        lineColor: lineColor, // importから読み込んだsetter,getterをあてはめ
    }
});

 コンポーネント外に定義を書いてコンポーネント内でimportするのみです。例ではcomputedですがpropsなど他にも色々使えます。注意点はコンポーネントを指すthisを外に持ち出そうとしないことです。これは難解になってミスが起きやすい上、外部コードに責務外のことまで任せることになりがちだからです。
 

  • この記事いいね! (1)