Nuxt + TypeScriptで、Vuexを扱う

概要

公式に記載があるvuex-module-decoratorsを使用して、Nuxt + TypeScriptの環境でVuexを扱う方法。
ストア - Nuxt TypeScript

環境

名称	Version
Node	14.10.1
Nuxt	2.14.5
Vue	2.6.12
TypeScript	3.9.7
Vuetify	2.3.10
nuxt-property-decorator	2.8.8
vuex-module-decorators	1.0.1

手順

npmのインストール

npm i vuex-module-decorators

ファイルの作成

~/store/index.ts

import { Store } from "vuex";
import { initialiseStores } from "~/utils/store-accessor";

const initializer = (store: Store<any>) => initialiseStores(store);

export const plugins = [initializer];
export * from "~/utils/store-accessor";

~/utils/store-accessor.ts

import { Store } from "vuex";
import { getModule } from "vuex-module-decorators";
import client from "~/store/client";

let clientStore: client;

function initialiseStores(store: Store<any>): void {
  clientStore = getModule(client, store);
}

export { initialiseStores, clientStore };

~/store/client.ts

import { Module, VuexModule, Mutation } from "vuex-module-decorators";

@Module({
  name: "client",
  stateFactory: true,
  namespaced: true
})
export default class Client extends VuexModule {
  private test: string = "";

  @Mutation
  public setTest(test: string) {
    this.test = test;
  }

  public get getTest() {
    return this.test;
  }
}

使用方法

Storeを扱う場合は、import文が必須

import { clientStore } from "~/store";

データの保存

client.tsで定義したMutationを使用してStoreにデータを保存する。

clientStore.setTest(格納したい値);

データの取得

clientStore.getTest;

備考

以下の方法でデータの保存は、エラーが発生するため出来ない。

clientStore.test = 格納したい値;

テストとして作成した画面のスクリーンショットとソースコード

ボタンを押下すると、入力フォームに入力した値をStoreに格納後、別画面に遷移する。遷移先の画面で、Storeの値を取得して出力する画面を作成。

<template>
  <div>
    <v-simple-table>
      <tbody>
        <tr>
          <td>
            <v-text-field
              v-model="inputTest"
            >
            </v-text-field>
          </td>
        </tr>
      </tbody>
    </v-simple-table>
    <v-btn　@click="storeTestMethod">test</v-btn>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import { clientStore } from "~/store";

@Component({})
export default class extends Vue {
  private inputTest: string = "";

  private storeTestMethod(): void {
    clientStore.setTest(this.inputTest);
    this.$router.push("/test");
  }
}
</script>

<template>
  <div>
    <div>{{ storeTestData }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import { clientStore } from "~/store";

@Component({})
export default class extends Vue {
  private storeTestData: string = "";

  beforeMount() {
    this.storeTestData = clientStore.getTest;
  }
}
</script>