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>