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

Question

[andrei_pro]

Есть компонент 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
            },
        },

Answer 1

[0xD34F]

пишет ошибку что свойства id нету

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

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

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

Условный рендеринг - добавьте v-if="данные" тому элементу/компоненту, что эти данные использует.

Comments

[andrei_pro]

...mapGetters([
                'getProjects',
                'getActiveProject',
            ]),
            isCreator() {
                return this.getActiveProject() && this.getActiveProject().creator.id === this.user.id
            }

Answer 2

[andrei_pro]

Проблему решил. Во vuex в store: {} у меня был описан дефолтный стейт в котором не было creator

Answer 3

[Владимир Мальков]

Возможно не лучший, но просто работающий метод:
При создании state, присваиваешь своей переменной null.

Потом импортишь ее

import { mapState } from "vuex"
...
computed: {
    ...mapState(['ТВОЯ_ПЕРЕМЕННАЯ'])
}

В шаблоне юзаешь v-if="ТВОЯ_ПЕРЕМЕННАЯ"