如何在訪問VueStore狀態之前等待操作完成？

我Vuejs/Nuxtjs的應用程式中，我需要訪問一個Vuex店state它已被修改后Vuex action。目前，當我嘗試運行action，assignment然后我得到舊狀態而不是之后更新的狀態action。

如何讓代碼等待action完成然后運行下一條陳述句？以下是我目前擁有的代碼：Vuejs 組件：

<template>
  <div>
    <input v-model="formData.value" type="text">
    <button @click="performAction">
      Click Me
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        value: '',
        returnValue: ''
      }
    }
  },
  methods: {
    performAction () {
      // Set the value within the Vuex Store
      this.$store.commit('modules/DataStore/populateData', this.formData.value)

      // Perform the Action
      this.$store.dispatch('modules/DataStore/getData').then(() => {
        console.log("AFTER COMPLETE ACTION")
      })

      // Assign the update value to the variable
      this.formData.returnValue = this.$store.state.modules.DataStore.data
    }
  }
}
</script>

<style>
</style>

Vuex 商店：

export const state = () => ({
  data:''
})

export const mutations = {
  populateData (state, data) {
    state.data = data
  }
}

export const actions = {
    getData ({ commit, state, dispatch }) {
        const headers = { 'Content-Type': 'application/json' }
        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)
            })
    }
}

以下是我嘗試過的事情，目前沒有任何作業：

1. 我試過這個.then()功能。
2. 我試過了Async，await但都不起作用

任何建議將不勝感激。提前致謝。

uj5u.com熱心網友回復：

您可以在 vuex 中創建 getter：

export const getters = {
  getData: (state) => state.data,
};
export const actions = {
  async setData ({ commit }, data) {
    const headers = { 'Content-Type': 'application/json' }
    await this.$axios
      .post('/getUrlData', data, { headers })
      .then((response) => {
        console.log("WITHIN RESPONSE")
        commit('populateData',response.data)
      })
      .catch((error) => {
        commit('populateData', 'Unable to obtain data, Error : '   error)
      })
  }
}

然后在組件中，您可以映射 getter 和操作，并呼叫它們：

import { mapGetters, mapActions } from 'vuex'

computed: {
...mapGetters(['getData']),
},
methods: {
  ...mapActions(['performAction']),
 
  async performAction() {
    await this.setData(this.formData.value)
    this.formData.returnValue = this.getData
  }
}

uj5u.com熱心網友回復：

如果您想在呼叫方法中鏈接它，則需要在您的承諾中回傳您的承諾。例如：

getData ({ commit, state, dispatch }) {
    const headers = { 'Content-Type': 'application/json' }
    return this.$axios  // now this promise will be returned and you can chain your methods together
        .post('/getUrlData', state.data, { headers })
        .then((response) => {
            console.log("WITHIN RESPONSE")
            commit('populateData',response.data);
            return response.data; //this will allow you do send the data through to the next Then() call if you want to
        })
        .catch((error) => {
            commit('populateData', 'Unable to obtain data, Error : '   error)
        })
}

使用 async-await IMO 更容易管理這種情況。它成為了：

export const actions = {
    async getData ({ commit, state, dispatch }) {
        const headers = { 'Content-Type': 'application/json' }
        const response = await this.$axios.post('/getUrlData', state.data, { headers });
        console.log("WITHIN RESPONSE")
        commit('populateData',response.data);

     }
}

和

methods: {
async performAction () {
    // Set the value within the Vuex Store
    this.$store.commit('modules/DataStore/populateData', this.formData.value)

     // Perform the Action
     await this.$store.dispatch('modules/DataStore/getData');
     console.log("AFTER COMPLETE ACTION");

    // Assign the update value to the variable
    this.formData.returnValue = this.$store.state.modules.DataStore.data
   }
}

標籤：javascript Vue.js nuxt.js Vuex

上一篇：如何在beforeRouterEnter守衛中呼叫next()

下一篇：嘗試在VueJs中禁用導航按鈕時出錯