月: 2018年8月

Vue.js で開発していてアプリケーション内でデータを共有したくなりました。
いくつか方法があると思います。
・Vuex
・Cookie
・LocalStrage
・グローバル変数

Vuex とかが正しいのかもしれないですが、少し冗長な気がしたし、Cookie だとデータの保存期間の制御など要件に合わすのが大変そうだった。
アプリが起動しているときだけ保持して、且つ複数のウィンドウでアプリが起動されウィンドウごとに別のデータとして管理する想定です。
もっとも簡単そうですし要件にも合うのでグローバル変数を使う方針にしました。

今回はプラグインとして実現することにしました。
まずはプラグインと、データを保持するクラスの定義です。

import _Vue from "vue";

export default function AppDataPlugin<AppDataPluginOptions>(Vue: typeof _Vue, options?: AppDataPluginOptions): void {
    Vue.prototype.$appData = new AppData();
}

export class AppDataPluginOptions {
}

export class AppData {
    public dataAaa: string = "";
    public dataBbb: string = "";
}

VisualStudioCode などのためにコード型定義ファイルも用意。
AppDataPlugin.d.ts とかのファイル名で src 直下に保存

import AppDataPlugin, { AppData } from "./components/AppDataPlugin";
declare module 'vue/types/vue' {
  interface Vue {
    $appData: AppData
  }
}

使う側は下記のような感じです。

<script lang="ts">
import Vue from "vue";
import AppDataPlugin from "./AppDataPlugin";

Vue.use(AppDataPlugin);

export default Vue.extend({
    ・・・
    methods: {
        xxx() {
            console.log(this.$appData.dataAaa);
        }
    }
    ・・・
});