【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を外に持ち出そうとしないことです。これは難解になってミスが起きやすい上、外部コードに責務外のことまで任せることになりがちだからです。