[Nuxt.js/Typescript] hur hämtar man data från vuex?

Jag är ny på Typescript. Jag satte Objective Data i Vuex-butiken, men jag kan inte få tag på det.

Detta är de objektiva uppgifterna om användare (med andra ord, konto).

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
}

Jag vill få e-post som ovan currentUser．email, men fick fel Cannot read property 'email' of null. Om det bara sätts till currentUser, visas de sparade uppgifterna som {email: [email skyddad], name: dummy} på sidan som de är.

vad ska jag göra? snälla hjälp!

hälsningar.

Svar #1

Du kan göra det med vuex-class biblioteket, som redan är installerat med nuxt-property-decorator.

När du deklarerar din komponent, importera också namnområdet från nuxt-property-decorator:

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

Då kan du komma åt dina user-egenskaper i store på detta sätt med vuex-class-dekorationer:

@user.Getter
public currentUser!: string


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

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

Du kan hitta mer om detta ämne i vuex-avsnittet av den här artikeln.

Alternativt föreslår den officiella Nuxt TypeScript-dokumentationen att man provar paketet nuxt-typed-vuex.