Apologies for any language barriers, I am using a translator tool to communicate. As a beginner in VUE and VUE X, I know there may be some mistakes in my approach. Currently, I am facing an issue with displaying a publication based on its ID.
Below is the DATA provided:
data(){
return {
list: [this.$store.dispatch('allPublications')],
id:'',
feed: '',
}
},
Here is the STORE action implemented:
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)
})
},
Highlighted below is the computed section of the code:
computed: {
...mapState({
user: 'profileUser',
publication: 'publicationFeed',
message: 'publicationInfos'
}),
message(){
return this.$store.state.message;
},
},
Next, here is the state setup:
setMessage: function(state, message){
state.message = message
},
Now, let's look at the template structure used for rendering:
<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">
In addition, here are some screenshots that could assist in understanding the situation better:
Before reloading the page, everything is OK
After reloading the page, everything is going wrong
While everything functions correctly without a page reload, encountering errors post-reload leads to disappearance of computed values and inability to retrieve data.
I have explored various resources but haven't found a solution yet; grateful for any guidance provided! Thank you!