在 VueJS 中发送后如何发出事件？

Question

我有一个带有行网格的父组件，我正在使用 vuex 传递数据，因为我添加了一条新记录，我想在模式 window 中打开新添加的记录。我正在发出一个事件并使用第一条记录（索引 = 0）打开模式。问题在于，由于它是使用 vuex "action" 添加记录的 ajax 调用，所以在添加记录之前发生了发出。我怎样才能等到记录被添加到事件中？或者有更好的方法吗？

代码如下：

<!-- Grid Component -->
<grid>
   <addrow @newrecordadded="openNewlyAddedRecord"></addrow>
   <gridrow v-for="row in rows" :key="row._id"></gridrow>
</grid>

computed: {
    rows(){
       return this.$store.state.rows;
    }  
},
methods:{
    openNewlyAddedRecord(){
        this.openmodal(this.rows[0])
    }
}

我的store.js

state: {
    rows : []
}

所以在 addrow 组件中，一旦用户点击提交表单，它就会发送到 vuex

methods:{
    onsubmit(){
        this.$store.dispatch('addrow',this.newrow);
        this.$emit("newrecordadded");    
    }
}

actions.js

addrow({ commit,state }, payload){
    var url = "/add";
    Axios.post(url,payload)
    .then(function(response){
        commit('addnewrow',response.data);
    });
}

mutations.js

addnewrow(state,payload){
    state.rows.unshift(payload);
}

或者我们可以传递一个回调函数来调度吗？

Answer 1

您可以使添加行操作 return 成为一个承诺，如下所示：

addrow({ commit,state }, payload){
  var url = "/add";
  return Axios.post(url,payload)
    .then(function(response){
      commit('addnewrow',response.data);
    });
}

在组件的 onsubmit 方法中，您现在可以执行以下操作：

this.$store.dispatch('addrow',this.newrow).then(() => this.$emit("newrecordadded");)

在 VueJS 中发送后如何发出事件？

How do I emit an event after dispatch in VueJS?

vue.js

vuejs2

vue-component

vuex