在Vue.js/Nuxt.js应用中，如何等待Vuex Action完成后再访问Vue Store状态？

核心问题出在异步Action的执行时机没把控好——你的getData Action里包含异步axios请求，但Action本身没有返回这个异步操作的Promise，导致外面的.then()和赋值语句没等请求完成就执行了，所以拿到的还是旧状态。下面给你两种可行的解决方案：

方案一：让Action返回Promise，在组件中等待执行完成 #

首先修改Vuex Store里的getData Action，让它返回axios请求的Promise（axios的post本身就返回Promise，直接return即可）：

// Vuex Store
export const actions = {
  getData ({ commit, state, dispatch }) {
    const headers = {
      'Content-Type': 'application/json'
    }
    // 关键：返回axios请求的Promise，让外部可以等待异步操作完成
    return this.$axios
      .post('/getUrlData', state.data, { headers })
      .then((response) => {
        console.log("WITHIN RESPONSE")
        commit('populateData', response.data)
      })
      .catch((error) => {
        commit('populateData', 'Unable to obtain data, Error : ' + error)
        // 可选：抛出错误，让组件可以捕获处理
        throw error
      })
  }
}

然后在组件的performAction方法中，把赋值逻辑放到异步操作完成后的回调里，这里提供两种写法：

用.then()链式调用： #

// Vue组件methods
performAction () {
  this.$store.commit('modules/DataStore/populateData', this.formData.value)
  // 现在dispatch会返回Action的Promise，等待异步操作完成再执行后续代码
  this.$store.dispatch('modules/DataStore/getData').then(() => {
    console.log("AFTER COMPLETE ACTION")
    // 此时状态已经更新，可以拿到最新值
    this.formData.returnValue = this.$store.state.modules.DataStore.data
  }).catch(error => {
    console.error('请求出错:', error)
  })
}

用async/await语法（更简洁直观）： #

// Vue组件methods
async performAction () {
  try {
    this.$store.commit('modules/DataStore/populateData', this.formData.value)
    // 等待Action的异步操作完成
    await this.$store.dispatch('modules/DataStore/getData')
    console.log("AFTER COMPLETE ACTION")
    // 此时状态已更新
    this.formData.returnValue = this.$store.state.modules.DataStore.data
  } catch (error) {
    console.error('请求出错:', error)
  }
}

方案二：用计算属性自动响应状态变化（更符合Vue响应式理念） #

如果你不想手动处理异步等待，还可以用Vue的计算属性直接映射Vuex状态，状态更新时计算属性会自动同步，无需手动赋值：

// Vue组件script部分
export default {
  data () {
    return {
      formData: {
        value: ''
      }
    }
  },
  computed: {
    // 计算属性自动关联Vuex状态，状态更新时自动同步
    returnValue () {
      return this.$store.state.modules.DataStore.data
    }
  },
  methods: {
    async performAction () {
      this.$store.commit('modules/DataStore/populateData', this.formData.value)
      await this.$store.dispatch('modules/DataStore/getData')
      // 无需手动赋值，returnValue会自动更新
    }
  }
}

之后在模板里直接使用{{ returnValue }}即可，不用再绑定formData.returnValue。

为什么你之前的方法没生效？ #

你之前用.then()却没效果，是因为原getData Action没有返回axios的Promise——Action函数本身是同步执行的，它内部的axios请求是异步的，但Action函数执行完就结束了，外面的.then()会在Action函数执行完毕（而非请求完成）时触发，此时状态还没更新。而你的赋值语句又写在.then()外面，自然拿到的是旧值。

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