VueJS dispatch函数执行顺序异常导致Vuex状态滞后、刷新数据丢失问题

核心问题原因 #

• 执行顺序不符合预期：getAnnouncements是异步Action，dispatch调用后不会等待异步请求完成就会继续执行后续代码，所以你会先看到After dispatch function的日志，再看到接口请求、触发mutation的日志。
• 组件数据滞后：你在data中直接将Vuex的announcements赋值给本地变量，data仅在组件初始化时执行一次，后续Vuex状态更新时，本地变量不会自动同步，导致数据滞后。
• 刷新页面后无数据：本质是上面两个问题的叠加，刷新后组件重新初始化，data拿到的是Vuex中初始的空数组，异步请求更新Vuex后本地变量没有同步，看起来就像没有触发更新。

修复方案 #

1. 替换本地变量为响应式计算属性 #

删除data中定义的announcements，改为通过计算属性绑定Vuex的getter，保证Vuex状态更新时组件数据自动同步：

// ClubDetails.vue 新增计算属性
import { mapGetters } from 'vuex' // 可选，用原生写法也可以

export default {
  name: "ClubDetails",
  data(){
    console.log("inside data")
    return {
      club_id: this.$route.params.clubID,
      // 删掉本地的announcements定义
    }
  },
  computed: {
    // 写法1：原生写法
    announcements() {
      return this.$store.getters['ClubDetails/getAllAnnouncements']
    }
    // 写法2：mapGetters简化写法
    // ...mapGetters('ClubDetails', ['getAllAnnouncements']) // 模板中直接使用getAllAnnouncements即可
  },
  // 后续代码...
}

2. 调整异步Action调用逻辑 #

dispatch返回Promise，要等待异步逻辑执行完成再执行后续代码的话，给mounted加async/await即可匹配你预期的执行顺序：

async mounted() {
  await this.$store.dispatch('ClubDetails/getAnnouncements', this.club_id)
  console.log("After dispatch function")
},

3. 可选验证逻辑 #

如果修复后刷新仍有问题，可以在mounted中打印this.club_id，确认刷新时路由参数可以正常获取，排查路由配置问题。

内容的提问来源于stack exchange，提问作者Ahmet-Salman