Vue.js，Vuex与承诺

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，但是由于您没有在要分派的操作中返回任何内容，因此Promise会立即解析， then处理程序将在异步getDataFromDB操作完成之前执行。

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

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

这样，来自动作的Promise就是dispatch调用返回的内容， then异步处理程序解决后， then处理程序才会触发。

Answer 2

解决此问题的另一种方法是将displayTable作为计算值，避免异步调用可能引起的任何问题。

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

<script>
    export default {
        ...
        computed: {
            displayTable() {
                return this.$store.state.dataSet.length > 0;
            },
        },
        methods: {
            getDataset: function() {
                this.$store.dispatch('getDataFromDB');
            }
        }
        ...
    }
</script>