Question

vue.js组件的用途

DataTable组件的目标是显示后端数据库'data。
NewDataPanel.vue组件的目标是将数据添加到后端数据库。

所需行为

通过NewDataPanel创建新数据后，它应该出现在后端数据库和DataTable中。

问题

创建新数据后，它们会显示在后端数据库中，但刷新DataTable组件时出现问题。

按要求的方法依次为：

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

假设首先创建一些数据，然后从后端检索所有数据，商店将被突变以显示DataTable上的刷新数据。

但是在添加第一个数据元素之后，DataTable没有发生任何事情。只有在添加第二个数据元素后，第一个才会出现在这里。

添加新数据后如何实现DataTable刷新？

P.S。：源和组件图如下。

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商店的行动通过API与Django Rest Framework一起使用：

postResult 只需将JSON发送到后端，保存数据
getResult 获取序列化对象列表，并使用该数据突变 state.resultTable

vuex'store.js

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

Answer 1

从您的代码中可以清楚地看出，您的Result方法会返回promise。你应该从你的行动中归还这个承诺。例如：

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

然后，您可以利用承诺确保getResult在postResult完成后才会运行。

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

vue.js和django。动作，组件更新，功能执行

1 个答案: