Vue.js、Vuex 与 Promises答案

【问题标题】：Vue.js, Vuex vs. PromisesVue.js、Vuex 与 Promises
【发布时间】：2018-09-13 02:17:55
【问题描述】：

想象一下，我有一个 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)
    }
    ...
}

目标：

我需要在商店的 actions 中检索和保存数据库中的数据，并且仅在显示 div.dataTable 之后。这就是 Promise 的功能。

问题：

在我的情况下，then() 的部分首先处理。我该怎么做才能解决它？

【问题讨论】：

这可能是因为您的 getDataFromDB 操作没有返回 Promise。你能显示那个代码吗？
@thanksd 代码已显示。仍然需要帮助。

标签： javascript vue.js promise vuex

【解决方案1】：

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

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

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

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

【讨论】：

感谢您的解释！有帮助！

【解决方案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>

【讨论】：