[Nuxt.js/Typescript] ako získať dáta z vuex?

Som začiatočník v Typescripte. Nastavil som Objective Data do Vuex store, ale nemôžem ich získať.

Toto sú objektívne údaje používateľov (inými slovami, account).

models/User.ts

export interface IUser {
  email: string | null
  name: string | null
}

export class UserClass implements IUser {
  email: string | null
  name: string | null

  constructor(email: string | null, name: string | null) {
    this.email = email
    this.name = name
  }
}

store/accounts.ts

import { UserClass } from '~/models/User'

@Module({ stateFactory: true, namespaced: true, name: 'account'})
export default class Account extends VuexModule {
  user: UserClass | null = null

  get currentUser() {
    return this.user
  }

  @Mutation
  storeUser(user: UserClass | null){
    this.user = user
  }

  @Action({})
  setUser(user: UserClass | null){
    this.storeUser(user)
  }
}

utils/store-accessor.ts

import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import Account from '~/store/account'

let accountStore: Account

function initializeStore(store: Store<any>): void {
  accountStore = getModule(Account, store))
}
export { initializeStore, accountStore }

components/Sample.vue

<template>
  <div>
    <p>NAME: {{currentUser.email}}</p>    // ★error !
  </div>
</template>
export default class SampleCmp extends Vue {
  @Prop() currentUser: UserClass | null = accountStore.currentUser
}

Chcem získať email ako vyššie currentUser．email, ale dostanem chybu Cannot read property 'email' of null. Ak nastavím len currentUser, uložené údaje ako {email: [email , name: dummy} sa zobrazia na stránke také, aké sú.

Čo by som mal robiť? Prosím, pomôž mi!

s pozdravom.

Odpoveď č. 1

Môžete to urobiť s knižnicou vuex-class, ktorá je už nainštalovaná s nuxt-property-decorator.

Pri deklarovaní vašej komponenty importujte tiež namespace z nuxt-property-decorator:

import { Vue, Component, namespace } from 'nuxt-property-decorator'
const user = namespace('user')

Potom môžete pristupovať k vlastnostiam úložiska user takto pomocou dekorátorov vuex-class:

@user.Getter
public currentUser!: string


@user.Mutation
public storeUser!: (data: UserClass | null) => void

@user.Action
public setUser(user: UserClass | null) => void

Viac informácií o tejto téme nájdete v časti vuex tohto článku.

Prípadne oficiálna dokumentácia Nuxt TypeScript naznačuje vyskúšať balík nuxt-typed-vuex.