Vue, pobiera dane z localStorage dopiero po odświeżeniu

Question

Hej,

Mam taką strukturę komponentów w mojej apce:

Kluczowe są tutaj te zaznaczone na żółto, w TasksPage pobieram sobie z mojego api użytkownika i wrzucam go do localStorage w taki sposób:

created() {
        this.axios.defaults.headers.common[
            "Authorization"
            ] = `Bearer ${userService.getToken()}`;


         this.axios.get('/api/user')
            .then(res => {
                if(res.status === 200)
                    userService.setUser(res.data.data);
            })
            .catch(e => {

                console.log(e.response);
            })
    }

Tutaj kod UserService:

export default class UserService {

    getUserObject() {
        return JSON.parse(localStorage.getItem('currentUser'));
    }

    getToken() {
        return localStorage.getItem('token');
    }

    setUser(user) {
        localStorage.setItem('currentUser', JSON.stringify(user));
    }

    setToken(token) {
        localStorage.setItem('token', token);
    }

    clearData() {
        const keysToRemove = ['token', 'currentUser'];

        keysToRemove.forEach(key => localStorage.removeItem(key));
    }
}

Natomiast w komponencie LoggedUserDropdown wrzucam do właściwości użytkownika z localStorage w ten sposób (próbowałem też przypisywać te dane w różnych Hookach, ale nadal nic):

data() {
            return {
                isActive: false,
                user: userService.getUserObject(),
            };
        },

I tutaj zaczynają się schody bo dostaje taki błąd:

Co śmieszniejsze: Wszystko działa jak należy po wciśnięciu F5.

Wcześniej wszystko działało bezproblemowo na tym kodzie, ale nagle dostaje takie coś :/

Answer 1

LoggedUserDropdown nie ma usera w data, dopiero poszedł po niego request.

Sensowne wyjścia są dwa:
1. (o ile biznesowo pasuje) Pobierz usera przed załadowaniem całej aplikacji -> to znaczy, w main.js axios.apiUser.. then createApp
2. Skorzystać z Vuexa
No ewentualnie są trzy, jak nie chcesz Vuexa to może byc Event Bus

przy 2 i 3 trzeba zaifować wszystkie rzeczy związane z userem w templatkach

Comments

Pykło, dzięki :D