Nuxt.js と Typescript で Store の変更と読み出し

目次

1. 概要
2. 準備
3. Storeの変更
4. Storeの読み出し
5. まとめ

1. 概要

最近Web開発はNuxt.js + Typescriptの組み合わせが気に入っています。
せっかく気に入っているので、この組み合わせでの開発ノウハウを記載しておきます。

今回は基礎の基礎、Storeの変更と読み出しです。

この記事では nuxt-community/typescript-template リポジトリから不要な記述を削ったものから始めます。
スタートとなるリポジトリは次のURLを参照してください。

github.com

2. 準備

Storeを変更するために、準備を進めていきます。

まずはStoreの構造を定義します。
mode というプロパティを文字列で定義し、これを使います。

編集するファイルは types/state.ts です。

export interface RootState {
  mode: string;
}

次にStoreを変更するI/Fを準備します。
編集するファイルは store/index.ts です。

import { RootState } from "~/types";
import { MutationTree, ActionTree } from "vuex";

export const state = (): RootState => ({
  mode: "normal"
})

export const mutations: MutationTree<RootState> = {
  setMode(state: RootState, mode: string): void {
    state.mode = mode
  }
}

export const actions: ActionTree<RootState, RootState> = {
}

これでStoreを変更するI/Fはできました。

3. Storeの変更

ボタンを押されたらStore内のmodeを特定の文字列に上書きします。
ボタン1つでは動きの確認がしにくいので、2つのボタンを設置します。

編集するファイルは pages/index.vue です。

<template>
  <section>
    <h1 class="header">Application Title</h1>
    <button @click="onClickMode1">mode 1</button>
    <button @click="onClickMode2">mode 2</button>
  </section>
</template>



<script lang="ts">

import { Component, Vue } from 'nuxt-property-decorator'
import { State } from 'vuex-class'

@Component({
  components: {}
})
export default class extends Vue {

  onClickMode1() {
    this.$store.commit('setMode', "mode 1")
  }

  onClickMode2() {
    this.$store.commit('setMode', "mode 2")
  }
}

</script>

4. Storeの読み出し

Storeのmodeを読み出して表示します。
こちらは非常に簡単です。

編集するファイルは今回も pages/index.vue です。

<template>
  <section>
    <h1 class="header">Application Title {{mode}}</h1>
    <button @click="onClickMode1">mode 1</button>
    <button @click="onClickMode2">mode 2</button>
  </section>
</template>



<script lang="ts">

import { Component, Vue } from 'nuxt-property-decorator'
import { State } from 'vuex-class'

@Component({
  components: {}
})
export default class extends Vue {

  @State mode!: string

  onClickMode1() {
    this.$store.commit('setMode', "mode 1")
  }

  onClickMode2() {
    this.$store.commit('setMode', "mode 2")
  }
}

</script>

クラス内の @State mode!: string と、template内の {{mode}} が増えただけです。

5. まとめ

この記事ではStoreの変更方法とその読み出し方を記載しました。
ただ全ての情報をStoreに持たせるといつか破綻してしまいます。
次はPropsを用いた実装方法も記載したいと思います。