Vue Js 和链接动作和承诺

Question

在我的组件上，我有 2 个 mounted 操作，它们自己会从后端获取数据，并且每个操作还需要调用 mutations。问题是第二次突变取决于第一次调用的结果我需要确保是这种情况，目前有时第二次通话会在第一次通话之前结束。

组件

methods: {
    ...mapActions([
        'fetchTypesOne',
        'fetchTypesTwo'
   ])
},
mounted() {
    this.fetchTypesOne()
    .then(this.fetchTypesTwo())
    .catch(errors => console.log(errors));
}

还有我的店

    actions: {
        fetchTypesOne({commit}) {
            return axios.get('url')
                .then(response => {
                    commit('MUTATION_ONE', response.data)
                })

        },
        fetchTypesTwo({commit}) {
            return axios.get('url2')
                .then(response => {
                    commit('MUTATION2', response.data);
                })
        }
}

Answer 1

当你这样做时

.then(someFunction())

函数 someFunction() 立即执行，它应该是 return 一个函数。并且 returned 函数将在 promise 完成后执行。尝试做

then(someFunction) 没有尾随括号或 then(() => someFunction()).

另外，我认为您不应该这样调用存储函数。至少那不是我在文档中看到的方式：https://vuex.vuejs.org/guide/actions.html#composing-actions

Vue Js 和链接动作和承诺

VueJs and chaining actions and promisses

javascript

vue.js

es6-promise

vuex