Блог

Можно ли получить доступ к методам класса через состояние Vuex?

В следующей ситуации я хочу позвонить fullName() , чтобы отобразить отформатированное имя пользователя.

TypeError: store.state.user.fullName is not a function

Классы

 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(),
    },
})
 

Компонент

 setup(){
    const state = useState(key)
    return {
        name: computed(_ => store.state.user.fullName('forward'))
    }
}
 

Как кажется, Vuex удаляет методы класса, сохраняя только его простые значения.

Мой обходной путь для восстановления методов класса состоял в том, чтобы скопировать состояние пользователя Vuex в новый экземпляр пользователя.

 const user = computed(_ => Object.assign(new User(), store.state.user))