javascript - Vue.js、Vuex 与 Promises

Question

想象一下，我有一个 Vue 应用程序，其所需部分的结构如下:

我分为三个部分。地点:

<强>1。 Vue部分:

<template>
<div>
    <div v-if="displayTable" class="dataTable">
        ...
    </div>
</div>
</template>

<script>
    export default {
        ...
        methods: {
            getDataset: function() {
                this.$store.dispatch('getDataFromDB')
                    .then(() => {
                        if (this.$store.state.dataSet.length > 0) {
                            this.displayTable = true
                        }
                    })
            }
        }
        ...
    }
</script>

<强>2。 Vuex 部分

const actions = {
    ...
    getDataFromDB ({commit}, payload) {
        DataSources.apiGetData(payload.querystring)
            .then(dataset => commit(GET_DATA, {dataset}))
    }
    ...
}

<强>3。 axios部分

export const DataSources = {
    ...
    return apiGetData (queryString) {
        return axios.get('urlString').then(response => return response.data)
    }
    ...
}

目标:

我需要在商店的操作 中从数据库中检索和保存数据，然后才显示 div.dataTable。这就是 Promise 的功能。

问题:

在我的例子中，then() 首先处理部分。 我应该怎么做才能修复它？

Answer 1

默认情况下，this.$store.dispatch() 调用会返回一个 Promise，但是由于您没有在被分派(dispatch)的操作中返回任何内容，因此 Promise 会立即解析，然后 处理程序将在异步 getDataFromDB 操作完成之前执行。

您需要在 getDataFromDB 操作中返回调用 DataSources.apiGetData() 创建的 Promise:

getDataFromDB ({commit}, payload) {
  return DataSources.apiGetData(payload.querystring)
    .then(dataset => commit(GET_DATA, {dataset}))
}

这样，操作中的 Promise 就是 dispatch 调用返回的内容，并且 then 处理程序在异步操作完成之前不会触发。