如何在不刷新评论的情况下更新评论?

Question

首先，我使用的是vuex和axios。

• 商店：评论服务.js
• 组件：
  • CommentBox.vue (Top components)
  • CommentEnter.vue (子组件)

这就是我编写的代码的逻辑。

在名为commentService.js的商店中，有一个名为commentUpdate的突变。 并且有一些行动称为postComment和getComment.

此时，在名为CommentBox的组件中调度getComment与async created()。

然后，在getComment中，commentUpdate被提交并执行。

CommentUpdate创建一个由getComment查询的注释数组，并将它们存储在名为commentList的状态中。

然后我会得到一个带有"计算"的评论列表。

CommentEnter，一个子组件，使用在CommentBox中注册为复合的commentList作为道具。

下面的代码是commentService.js。

import axios from 'axios'
export default {
namespaced: true,
state: () => ({
comment:'',
commentList: []
}),
mutations: {
commentUpdate(state, payload) {
Object.keys(payload).forEach(key => {
state[key] = payload[key]
})
}
},
actions: {
postComment(state, payload) {
const {id} = payload
axios.post(`http://??.???.???.???:????/api/books/${id}/comments`, {
comment: this.state.comment,
starRate: this.state.starRate
}, {
headers: {
Authorization: `Bearer ` + localStorage.getItem('user-token')
}
})
.then((res) => {
console.log(res)
this.state.comment = ''
this.state.starRate = ''
)
.catch((err) => {
alert('댓글은 한 책당 한 번만 작성할 수 있습니다.')
console.log(err)
this.state.comment = ''
this.state.starRate = ''
})
},
async getComment({commit}, payload) {
const {id} = payload
axios.get(`http://??.???.???.???:????/api/books/${id}/comments`)
.then((res) => {
console.log(res)
const { comment } = res.data.commentMap
commit('commentUpdate', {
commentList: comment
})
})
.catch((err) => {
console.log(err)
commit('commentUpdate', {
commentList: {}
})
})
}
}
}

下面的代码是 CommentBox.vue

computed: {
commentList() {
return this.$store.state.commentService.commentList
}
},
methods: {
async newComment() {
if(this.$store.state.loginService.UserInfoObj.id === '') {
alert('로그인 후 이용할 수 있습니다.')
return
}
this.$store.dispatch('commentService/postComment', {
id: this.$route.params.id,
comment: this.$store.state.comment,
starRate: this.$store.state.starRate
})
}
},
async created() {
this.$store.dispatch('commentService/getComment', {
id: this.$route.params.id
})
}

下面的代码是 CommentEnter.vue

created() {
this.userComment = this.comment
},
props: {
comment: {
type: Object,
default: () => {}
}
},

我征求了很多建议。

在 axios post 请求成功后，有很多评论要求 axios get 请求。

事实上，我请求一个 axios 在 axios 帖子的.then()范围内，并且网络选项卡确认 get 请求在 post 请求之后正常发生。

但是当我注册新评论时，它仍然没有立即看到。

我只能在刷新时看到新评论。

如何在注册时立即在屏幕上显示新评论？

Answer 1

你不能在postComment完成后打电话给getComment吗？

methods: {
async newComment() {
if(this.$store.state.loginService.UserInfoObj.id === '') {
alert('로그인 후 이용할 수 있습니다.')
return
}
this.$store.dispatch('commentService/postComment', {
id: this.$route.params.id,
comment: this.$store.state.comment,
starRate: this.$store.state.starRate
}).then(function() {
this.$store.dispatch('commentService/getComment', {
id: this.$route.params.id
})
})
}
},
}

或者由于您正在使用async：

methods: {
async newComment() {
if(this.$store.state.loginService.UserInfoObj.id === '') {
alert('로그인 후 이용할 수 있습니다.')
return
}
await this.$store.dispatch('commentService/postComment', {
id: this.$route.params.id,
comment: this.$store.state.comment,
starRate: this.$store.state.starRate
})
this.$store.dispatch('commentService/getComment', {
id: this.$route.params.id
})
}
},
}