Nuxt.js + TypeScriptを用いたStoreの初期設定

2020年6月29日 2020年6月30日 3分30秒

はじめましてこんにちは、ひょうどうです。

今回はNuxt.jsでTypeScriptを使用する時、Storeの初期設定をメモします！

コード

~/store/index.ts

~/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

utilsフォルダを作成し、~/utils/store-accessor.tsファイルを作成します。

store-accessor.tsファイルに以下のコードを記述する。

import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import Auth from '~/store/auth'

/* eslint import/no-mutable-exports: 0 */
let authStore: Auth

function initialiseStores(store: Store<any>): void {
  authStore = getModule(Auth, store)
}

export {
  initialiseStores,
  authStore
}

今回は仮で、store/auth.tsを作ったと仮定して記述してます。

使い方

<template lang="pug">
  v-layout
</template>

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

@Component
export default class Index extends Vue {
  get user() {
    return authStore.user
  }
}
</script>

<style lang="scss" scoped></style>