Vuex commit成功后UI无响应 仅刷新浏览器才更新问题求解

问题原因&解决方案 #

1. Mutation参数解构不匹配 #

你调用commit时直接传入了response.data，但postComment mutation在接收参数时做了对象解构，要求传入的参数是包含commentData字段的对象。如果response.data本身就是评论数据，没有外层包裹commentData字段，解构后拿到的值就是undefined，相当于没有给state.commentData赋值有效值，自然不会触发UI更新。
修正方案（二选一即可）：

• 调整commit传参：context.commit("postComment", { commentData: response.data })
• 调整mutation参数，去掉解构：

mutations: { 
  postComment(state, commentData) {
    console.log(commentData);
    state.commentData = commentData;
  }
}

2. 评论数据类型&更新逻辑错误 #

你初始化state.commentData是空对象{}，但评论区渲染的应该是多条评论组成的数组，类型不匹配会导致响应式异常、遍历渲染失效。
另外你当前提交评论后直接覆盖commentData，如果后端提交评论接口仅返回新增的单条评论，会直接覆盖原有评论列表，只有刷新页面重新拉取全量评论时才会正常显示。
修正方案：

1. 调整初始值为数组：

state: {
  // 其他字段不变
  commentData: []
}

2. 如果接口仅返回新增的单条评论，修改mutation为追加数据：

mutations: { 
  postComment(state, newComment) {
    state.commentData.push(newComment);
  }
}

如果接口返回全量评论列表，可保留直接赋值的逻辑。

3. 命名空间配置错误 #

namespaced: true是Vuex子模块的配置项，根store不需要配置该属性。如果当前你的store是注册的子模块，还需要调整组件内的调用写法：

• dispatch时加模块名前缀：this.$store.dispatch("模块名/addComment", {...})
• mapState时指定模块：computed: mapState('模块名', ["commentData", "userData"])

4. 异步操作后续处理 #

你可以在dispatch时通过Promise回调确认提交成功，做清空输入框之类的操作优化体验：

onSubmitComment(e) {
  e.preventDefault();
  this.$store.dispatch("addComment", {
    id: this.postId,
    name: this.userData.name,
    comment: this.comment,
  }).then(() => {
    // 提交成功清空输入框
    this.comment = ''
  })
}

补充：Vue2响应式适配 #

如果你使用的是Vue2，修改对象、数组类型的state时，不要直接新增未在state中声明的属性，尽量使用push/splice等数组原生方法，或者Vue.set/this.$set方法更新，保证响应式正常触发。

内容的提问来源于stack exchange，提问作者Dwi Kurniawan