Vue.js, Vuex vs약속들

Vue.js, Vuex vs약속들

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. 악리 부분

export const DataSources = {
    ...
    return apiGetData (queryString) {
        return axios.get('urlString').then(response => return response.data)
    }
    ...
}

목적:

div.dataTable을 표시한 후에만 저장소의 DB에서 데이터를 가져와 저장해야 합니다.이것이 Promise의 기능입니다.

문제:

저 같은 경우에는 먼저 ()의 부품 처리부터 하겠습니다.어떻게 하면 고칠 수 있을까요?

그this.$store.dispatch()call은 기본적으로 Promise를 반환하지만 디스패치되는 액션에서 아무것도 반환하지 않기 때문에 Promise는 즉시 해결되고then비동기 전에 핸들러가 실행됩니다.getDataFromDB작업이 완료되었습니다.

문의에 의해 작성된 Promise를 다음 주소로 반환해야 합니다.DataSources.apiGetData()당신의 안에서getDataFromDB액션:

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

이와 같이 행동으로부터의 약속은, 에 의해서 반환되는 것입니다.dispatch콜 및then비동기 액션이 해결될 때까지 핸들러는 기동하지 않습니다.

이 문제에 대처하는 다른 방법은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>

언급URL : https://stackoverflow.com/questions/49635425/vue-js-vuex-vs-promises