在 VueJS 中调度后如何发出事件？

Posted 2023-02-23

【中文标题】在 VueJS 中调度后如何发出事件？

【英文标题】：How do I emit an event after dispatch in VueJS?

【发布时间】：2017-12-25 14:14:19

【问题描述】：

我有一个带有行网格的父组件，我正在使用 vuex 来传递数据，当我添加一条新记录时，我想在模式窗口中打开新添加的记录。我正在发出一个事件并使用第一条记录（索引 = 0）打开模式。问题在于，由于它是使用 vuex“操作”添加记录的 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])
    

我的商店.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);

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

【参考方案1】：

您可以让 addrow 操作返回一个承诺，如下所示：

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");)

【讨论】：

不需要包装承诺。 return Axios.post(...).then(...) 可以。