VueJ에서 디스패치 후 이벤트를 내보내는 방법

VueJ에서 디스패치 후 이벤트를 내보내는 방법

행 그리드가 있는 부모 컴포넌트가 있으며 vuex를 사용하여 데이터를 전달하고 있습니다.새 레코드를 추가할 때 새로 추가된 레코드를 모달 창에서 열고 싶습니다.이벤트를 내보내고 첫 번째 레코드로 모달(index = 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])
    }
}

내 스토어.인텔

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

또는 콜백 기능을 디스패치에 전달할 수 있습니까?

다음과 같이 addrow 작업을 통해 약속을 반환할 수 있습니다.

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

컴포넌트의 on submit 메서드에서 다음 작업을 수행할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/45205265/how-do-i-emit-an-event-after-dispatch-in-vuejs