Как правильно получить и отобразить данные с сервера во vue/vuex?

Question

[betterthanyouthink]

У меня есть user в стейте, который по умолчанию null:

state: {
 user: null
}

Информация о пользователе будет содержаться во многих местах сайта, поэтому запрос необходимо сделать как можно раньше. Где лучше всего его сделать? Я делаю вот так в App.vue:

created() {
        this.$store.dispatch('loadUser')
    },

Когда пытаюсь получить имя пользователя в компоненте топ меню, то оно undefined (как понял, потому что мы еще не успели получить данные с сервера), а если сделаю проверку v-if, то ничего не отобразится.

computed: {
        username() {
            return this.$store.getters.username
        }
    }

Как это правильно реализовать?

Answer 1

[Сергей delphinpro]

а если сделаю проверку v-if, то ничего не отобразится.

с какого перепуга? Как только данные придут, так сразу и отобразятся. If — хороший вариант.
Можно еще глобальный лоадер (в смысле анимацию, спиннер поверх страницы) приделать, и крутить егео пока не загружены первичные данные.
Или скелетоны развесить (это такая серая мерцающая плашка, имитирующая контент) в нужных местах. Тоже на if-else.

Comments

[betterthanyouthink]

у меня выдает такую ошибку, потому что я пытаюсь получить имя еще до того, как данные были загружены

computed

username() {
            return this.$store.state.user.display_name
        }

[Vue warn]: Error in render: "TypeError: Cannot read property 'display_name' of null"

found in

---> at src/views/template/user-menu.vue
at src/views/UserPanel.vue
at src/App.vue

[betterthanyouthink]

понял свою ошибку, в стейте вместо user: null надо использовать пустой объект: user: {} , тогда ошибки не будет

[betterthanyouthink]

у меня к вам другой вопрос, как правильнее всего получить имя пользователя, через стейт или через геттер?
разницы ведь вообще нет, написать return this.$store.state.user.display_name или создать геттер

getUsername(state) {
            return state.user.display_name
        }

и написать так: this.$store.getters.getUsername

[Сергей delphinpro]

betterthanyouthink, Да без разницы. Если именно имя пользователя часто используется, удобно сделать геттер и замаппить его функцией mapGetters. Чтобы просто писать this.username Если другие данные пользователя нужны с одинаковой частотой, можно сделать геттер на всего пользователя. Канонов нет.

[Сергей delphinpro]

"TypeError: Cannot read property 'display_name' of null"

Используйте опциональные цепочки, с бабелем они уже уже работают
return this.$store.state.user?.display_name

Answer 2

[Антон Антон]

Можно вызывать action стора в точке входа и монтировать App.vue после загрузки. Можно вместо основного компонента показывать заставку, пока данные не будут загружены.