Ma propriété calculée se charge avant le chargement du modèle de données VUEJS/X

Question

Tout d'abord, je suis désolé pour mon mauvais anglais, j'utilise un traducteur.

Je suis débutant en VUE et VUE X et il y a décidément de grosses erreurs.

Je rencontre un problème avec VUE, actuellement j'essaie d'afficher une publication en fonction de son identifiant.

Voici mes données :

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

Voici l'opération de mon magasin :

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)
  })
},

Voici le résultat de mon calcul :

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

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

Voici mon statut :

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

Voici mon modèle :

<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">

Quelques captures d'écran pour vous aider davantage :

Outils VUE Google Chrome

Tout fonctionne bien jusqu'au rechargement de la page

Après avoir rechargé la page, tout s'est mal passé

Tout fonctionne bien tant que je ne recharge pas la page, une fois que je recharge la page j'obtiens une erreur et mes valeurs calculées disparaissent et je n'arrive pas à récupérer les données de mes calculs.

J'ai vérifié beaucoup d'informations mais je ne parviens pas à résoudre ce problème. Merci pour votre aide !

Answer 1

On dirait que j'ai résolu le problème :

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 })
},

En calcul :

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

J'ai ajouté un v-if au modèle

Cela a fonctionné pour moi, j'espère que cela aidera quelqu'un dans le besoin.