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

处理此问题的另一种方法是将 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>

Answer 2

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

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

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

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

Vue.js，Vuex 与 Promises

Vue.js, Vuex vs. Promises

javascript

vue.js

promise

vuex