How to track that data has been added to vuex?

Question

JavaScript

Hello.
There is a Workspace.vue component, it has a fetch() method that is called in mounted()
The fetch() method sends a request to the server and puts the received data in vuex - this.$store.dispatch('setProject', response.data)
In the Workspace component The .vue is also connected to the NavBar.vue component. It has a div that needs to be displayed only when the creator of the project === the current user.
In NavBar.vue, I added the isShow() property to the computed to hang it later on the div v-if="isShow", but when the page loads, it writes an error that there is no id property, but then NavBar.vue is rendered. How to solve this situation and how in another component to wait until the fetch () method puts data from the store?

computed: {
            ...mapGetters([
                'getProject',
            ]),
            isShow() {
                return this.getProject() && this.getProject().creator.id === this.user.id
            },
        },

Answer 1

writes an error that there is no id property

And is it really so? Instead of retelling, the text of the error should be shown. For some reason, I'm sure that you don't have an id there, but you can't get the id from the missing object, like "Cannot read property 'id' of undefined". If there are no objects, slip empty ones:

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

how in another component to wait until the fetch() method puts data from the store?

Conditional rendering - add v-if="данные"to the element/component that uses this data.

Answer 2

Perhaps not the best, but just a working method:
When creating state, assign null to your variable.
Then you import it

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

In the template you use v-if="YOUR_VARIABLE"