vue.js and django. action, component updating, function execution

Question

Purpose of vue.js components

Aim of DataTable component is to display backend database' data.
Aim of NewDataPanel.vue component is to add data to backend database.

Required behavior

After creating new data via NewDataPanel it should appear in backend database and at the DataTable.

Problem

After creating new data they appears in backend database but there is a problem with refreshing DataTable component.

As required methods are in sequence:

this.$store.dispatch('postResult')
this.$store.dispatch('getResult')

it's supposed that some data would first created and then all data would be retrieved from backend and the store would be mutated to display refreshed data at DataTable.

But after adding first data element nothing happened with DataTable. And only after adding second data element the first one would appear here.

How should I realize DataTable refreshing after adding new data?

P.S.: Sources and components diagram are below.

DataTable.vue

export default {
    // ...
    computed: {
        // ...
        ...mapGetters(['resultTable'])
        // ...
    }
    // ...
    beforeMount () {
        this.$store.dispatch('getResult')
    }
}

NewDataPanel.vue

export default {
    // ...
    methods: {
        // ...
        addData () {
            // ...
            this.$store.dispatch('postResult')
            this.$store.dispatch('getResult')
            // ...
        }
        // ...
    }
    // ...
}

vuex store's actions work with Django Rest Framework via API:

postResult just send JSON to backend, where data saved
getResult gets list of serialized objects and mutate state.resultTable with that data

vuex' store.js

actions = {
    getResult ({commit}, payload) {
        Result.getResult(payload).then(result => {
            commit(GET_RESULT, {result})
        })
    },
    postResult ({commit}, payload) {
        Result.postResult(payload)
    }
}

`this.$store.dispatch('postResult') this.$store.dispatch('getResult')` These api calls are not synchronous, you're posting the data and getting the data before the data is put into the database, which is why you are always one getResult behind. See https://stackoverflow.com/questions/40165766/returning-promises-from-vuex-actions for how to use promises in your function — , Mar 14 '18 at 17:26

score 0 · Answer 1 · answered Mar 14 '18 at 17:34

It's clear from your code that your Result methods return promises. You should return this promise from your actions. For example:

actions = {
    getResult ({commit}, payload) {
       return Result.getResult(payload).then(result => {
            commit(GET_RESULT, {result})
        })
    },
    postResult ({commit}, payload) {
        return Result.postResult(payload)
    }
}

You can then take advantage of the promise to make sure your getResult doesn't run until after postResult has finished.

this.$store.dispatch('postResult')
.then(() => this.$store.dispatch('getResult'))

vue.js and django. action, component updating, function execution

1 Answers1