My computed property loads before the VUEJS/X data template loads

Question

First of all, I'm sorry for my bad English, I'm using a translator.

I am a beginner in VUE and VUE X and there are definitely big mistakes.

I'm having a problem using VUE, currently I'm trying to display publications based on their ID.

This is my data:

data(){
    return {
        list: [this.$store.dispatch('allPublications')],
        id:'',
        feed: '',
    }
},

This is my store operation:

publicationId:({commit}, messages) => {
  instance.get('/publications/' + messages.id)
  .then(function(response){
    commit('setMessage', response.data.publication)
    console.log(response)
    this.feed = response.data.publication.data
  })
  .catch(function(error){
    console.log(error)
  })
},

This is the result of my calculation:

computed: {
    ...mapState({
        user: 'profileUser',
        publication: 'publicationFeed',
        message: 'publicationInfos'
        }),

        message(){
            return this.$store.state.message;
        },
},

This is my status:

setMessage: function(state, message){
  state.message = message
},

This is my template:

<template>
           <div class="card-body" @click="publicationId(message.id)">
            <span class="badge bg-secondary">{{ message.User.username }}</span>
            <div class="dropdown-divider"></div>
            <div class="card-text d-flex justify-content-between align-items-md-center">
                <p class="card-text d-flex flex-start">{{ message.message }}</p>
            </div>
            <span class="message__date">{{ message.createdAt.split('T')[0]}}</span>
        </div>
        <img class="card-img-top" alt="..." :src="message.image">

Some screenshots may help you more:

VUE Google Chrome Tools

Everything works fine until the page is reloaded

After reloading the page, everything goes wrong

Everything works fine as long as I don't reload the page, once I reload the page I get an error and my calculated values ​​disappear and I can't get the data from my calculations.

I have checked a lot of information but have not been able to solve this problem. Thank you for your help!

Answer 1

Looks like I've solved the problem:

data() {
    return {
        componentLoaded: false,
        list: [this.$store.dispatch('allPublications')],
        id: '',
        feed: '',
    }
},

Installation:

mounted() {
    this.componentLoaded = true;
    this.id = this.$route.params.id;
    this.$store.dispatch('publicationId', { id: this.$route.params.id })
},

In calculation:

computed: {
    message() {
        if (!this.componentLoaded) {
            return null
        } else {
            return this.$store.state.message;
        }
    },
},

I added a v-if

to the template

This worked for me, hope it helps someone in need.