Can Vuex state be used to access class methods?
For example, in this scenario, I am attempting to invoke fullName() to show the user's formatted name.
TypeError: store.state.user.fullName is not a functionClasses
export class User {
constructor(
public id: string = '',
public first_name: string = '',
public last_name: string = '',
) {}
fullName = (format: 'forward' | 'reverse' = 'forward') => {
if (format === 'forward') return `${this.first_name} ${this.last_name}`
if (format === 'reverse') return `${this.last_name}, ${this.first_name}`
}
}
export interface RootState {
user: User
}
Vuex
export const key: InjectionKey<Store<RootState>> = Symbol()
export default createStore<RootState>({
strict: true,
state: {
user: new User(),
},
})
Component
setup(){
const state = useState(key)
return {
name: computed(_ => store.state.user.fullName('forward'))
}
}