Vue 저장소 디스패치 오류 응답이 UI로 전달되지 않음

Vue 저장소 디스패치 오류 응답이 UI로 전달되지 않음

저장 실패 여부를 사용자에게 알리기 위해 Vue Store 디스패치 메서드에서 컴포넌트로 오류 응답을 가져오려고 합니다.

스토어/userDetails.js

const state = {
    loading: {
        user_details: false,
    }
}

const getters = {
    // Getters
}

const actions = {

save({commit, dispatch, rootState}, payload) {
    commit('setLoading', {name: 'users', value: true});
    axios(
        _prepareRequest('post', api_endpoints.user.details, rootState.token, payload)
    ).then((response) => {
        if (response.data) {
            commit('setState', {name: 'user_details', value: response.data.units});
            commit('setLoading', {name: 'user_details', value: false});
            dispatch(
                'CommonSettings/setSavingStatus',
                {components: {userDetails: "done"}},
                {root:true}
            );
        }
    }).catch((error)=> {
        console.log(error)
        return error
    }
    )
}

마이 컴포넌트 방식

뷰/Users.vue

  send() {
    this.$store.dispatch({
      type: 'Users/save',
      userDetails: this.current
    }).then(response => {
      console.log(response)
    });
  },

이상, 저는 두 곳에서 답변을 로그아웃하고 있습니다.

my store/userDetails.js 파일의 응답은 정상적으로 로그아웃되지만, 내 컴포넌트의 send() 함수에 전달되지 않습니다.다음으로 표시됩니다.undefined통과되지 않을 이유가 있나요?이렇게 하는 게 맞습니까?

난 이거면 돼.이 솔루션을 사용해 보십시오.
store.displaces를 설정합니다.

actions: {
    save(context, payload) {
      console.log(payload);
      return new Promise((resolve, reject) => {
        axios(url)
          .then((response) => {
            resolve(response);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
  },

My Component 메서드
App.vue

save(){
     this.$store.dispatch("save", dataSendToApi).then((response)=>{
       console.log(response)
     })
    }

1. 되돌아가다axiosStore Action 호출:

// add return
return axios(
    _prepareRequest('post', api_endpoints.user.details, rootState.token, payload)
  )
  .then()   // your stuff here
  .catch()  // your stuff here

2. 그래도 안 될 경우Promise[ Store Action ]에서 선택합니다.다음과 같이 합니다.

return new Promise((resolve, reject) => {
  return axios() // simplify for readibility reason, do your stuff here
    .then((response) => {
      //... your stuff here
      resolve(response) // add this line
    })
    .catch((error) => {
      // ... your stuff here
      reject(error) // add this line
    })
})

약속을 반환해야 합니다.참조 링크: vue doc

언급URL : https://stackoverflow.com/questions/66371632/vue-store-dispatch-error-response-not-being-passed-to-ui