VueJSでの発送後にイベントを発行するにはどうすればよいですか？

Question

私は、行のグリッドを持つ親コンポーネントを持っており、私は新しいレコードを追加するので、vuexを使ってデータを渡しています。新しく追加されたレコードをモーダルウィンドウで開きたいと思います。私はイベントを発行し、最初のレコード（index = 0）でモーダルを開きます。問題は、vuexの "action"を使ってレコードを追加するajax呼び出しであるため、レコードが追加される前にemitが実行されるということです。レコードにイベントが追加されるまでどのように待つことができますか？それとももっと良い方法がありますか？以下は

コードです：

<!-- 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 addrowコンポーネントでとても

state: { 
    rows : [] 
} 

それは

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

actions.jsをvuexする派遣提出フォームをユーザーがクリックする度

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

または代わりに、私たちは、ディスパッチするコールバック関数を渡すことができますか？あなたが今行うことができ、あなたのコンポーネント内のonSubmitメソッドで

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

：

Answer 1

あなたはのAddRowのアクションを行うことができますが、そうのような約束を、返す

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