Meine berechnete Eigenschaft wird geladen, bevor die VUEJS/X-Datenvorlage geladen wird

Question

Zuallererst entschuldige ich mich für mein schlechtes Englisch, ich benutze einen Übersetzer.

Ich bin ein Anfänger in VUE und VUE X und es gibt definitiv große Fehler.

Ich habe ein Problem bei der Verwendung von VUE. Derzeit versuche ich, eine Publikation anhand ihrer ID anzuzeigen.

Das sind meine Daten:

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

Das ist mein Ladenbetrieb:

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

Das ist mein Berechnungsergebnis:

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

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

Das ist mein Status:

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

Das ist meine Vorlage:

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

Einige Screenshots, die Ihnen weiterhelfen:

VUE Google Chrome Tools

Alles funktioniert einwandfrei, bis die Seite neu geladen wird

Nach dem Neuladen der Seite geht alles schief

Alles funktioniert einwandfrei, solange ich die Seite nicht neu lade. Sobald ich die Seite neu lade, erhalte ich eine Fehlermeldung und meine berechneten Werte verschwinden und ich kann die Daten aus meinen Berechnungen nicht abrufen.

Ich habe viele Informationen überprüft, konnte dieses Problem jedoch nicht lösen. Vielen Dank für Ihre Hilfe!

Answer 1

看来我已经解决了这个问题：

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

在安装中：

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

在计算中：

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

我在模板中添加了一个 v-if

这对我有用，希望对有需要的人有所帮助。