Hello, I am new to Typescript and I have encountered an issue with setting Objective Data to Vuex store.
Here is the Objective data of Users (also known as 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
}
I am trying to access the email using currentUser.email, but I keep getting an error
Cannot read property 'email' of nullcurrentUser, the stored data such as {email: [email protected], name: dummy}Can someone please advise on what steps I should take to resolve this issue? Your help would be much appreciated!
Thank you in advance.