Vue.js、Vuex 与 Promises

Posted 2023-02-22

【中文标题】Vue.js、Vuex 与 Promises

【英文标题】：Vue.js, Vuex vs. 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 代码已显示。仍然需要帮助。

【参考方案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>