• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud - Virtual Private Server VPS
+2 głosów
387 wizyt
pytanie zadane 21 czerwca 2021 w JavaScript przez CSSoup Mądrala (6,460 p.)

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ś :/

1 odpowiedź

+3 głosów
odpowiedź 21 czerwca 2021 przez niezalogowany
wybrane 22 czerwca 2021 przez CSSoup
 
Najlepsza

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

komentarz 22 czerwca 2021 przez CSSoup Mądrala (6,460 p.)
Pykło, dzięki :D

Podobne pytania

+1 głos
1 odpowiedź 330 wizyt
pytanie zadane 16 stycznia 2023 w JavaScript przez mi-20 Stary wyjadacz (13,250 p.)
0 głosów
1 odpowiedź 323 wizyt
pytanie zadane 30 czerwca 2021 w JavaScript przez Łukasz Sitnik Początkujący (380 p.)
0 głosów
1 odpowiedź 196 wizyt
pytanie zadane 27 czerwca 2021 w JavaScript przez mikey Użytkownik (820 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...