Sifat pengiraan saya dimuatkan sebelum templat data VUEJS/X dimuatkan

Question

Pertama sekali, saya minta maaf atas bahasa Inggeris saya yang teruk, saya menggunakan penterjemah.

Saya seorang pemula dalam VUE dan VUE X dan pasti ada kesilapan besar.

Saya menghadapi masalah menggunakan VUE, pada masa ini saya cuba memaparkan penerbitan berdasarkan IDnya.

Ini adalah data saya:

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

Ini adalah operasi kedai saya:

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

Ini adalah hasil pengiraan saya:

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

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

Ini status saya:

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

Ini templat saya:

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

Beberapa tangkapan skrin untuk membantu anda lebih lanjut:

VUE Alat Google Chrome

Semuanya berfungsi dengan baik sehingga memuatkan semula halaman

Selepas memuatkan semula halaman, semuanya menjadi salah

Semuanya berfungsi dengan baik selagi saya tidak memuat semula halaman, sebaik sahaja saya memuat semula halaman, saya mendapat ralat dan nilai yang dikira saya hilang dan saya tidak boleh mendapatkan data daripada pengiraan saya.

Saya telah menyemak banyak maklumat tetapi tidak dapat menyelesaikan masalah ini. Terima kasih atas bantuan anda!

Answer 1

Nampaknya saya telah menyelesaikan masalah:

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

Memasang:

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

Dalam pengiraan:

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

Saya menambah v-if pada templat

Ini berkesan untuk saya, harap ia membantu seseorang yang memerlukan.