@andrei_pro

Как отследить, что данные во vuex добавились?

Есть компонент Workspace.vue в нем метод fetch() который вызывается в mounted()
Метод fetch() отправляет запрос на сервер и полученные данные ложит в vuex - this.$store.dispatch('setProject', response.data)

В компоненте Workspace.vue подключен еще NavBar.vue компонент. В нем есть div который нужно выводить только когда создатель проекта === текущий юзер.

В NavBar.vue я добавил в computed свойство isShow() чтобы повесить потом на div v-if="isShow", но при загрузке страницы пишет ошибку что свойства id нету, но затем NavBar.vue отрисовывается. Как решать такую ситуацию и как в другом компоненте дождаться, пока метод fetch() положит данные с store?

computed: {
            ...mapGetters([
                'getProject',
            ]),
            isShow() {
                return this.getProject() && this.getProject().creator.id === this.user.id
            },
        },
  • Вопрос задан
  • 359 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
пишет ошибку что свойства id нету

А так ли это на самом деле? Вместо пересказа следует текст ошибки показывать. Почему-то уверен, что у вас там не id отсутствует, а не получается достать id из отсутствующего объекта, типа "Cannot read property 'id' of undefined". В случае отсутствия объектов подсовывайте пустые:

isShow() {
  return ((this.getProject() || {}).creator || {}).id === this.user.id;
},


как в другом компоненте дождаться пока метод fetch() положит данные с store?

Условный рендеринг - добавьте v-if="данные" тому элементу/компоненту, что эти данные использует.
Ответ написан
@andrei_pro Автор вопроса
Проблему решил. Во vuex в store: {} у меня был описан дефолтный стейт в котором не было creator
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
MalkovVladimir73
@MalkovVladimir73
Fullstack (node + vue.js)
Возможно не лучший, но просто работающий метод:
При создании state, присваиваешь своей переменной null.

Потом импортишь ее
import { mapState } from "vuex"
...
computed: {
    ...mapState(['ТВОЯ_ПЕРЕМЕННАЯ'])
}

В шаблоне юзаешь v-if="ТВОЯ_ПЕРЕМЕННАЯ"
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы