Vuex에서 Axios 요청이 성공한 후 알림 표시

Vuex에서 Axios 요청이 성공한 후 알림 표시

데이터를 저장하기 위해 Vuex를 사용하고 있습니다.내 앱에 로그인하기 위한 액션이 있습니다.요청이 성공했을 때 알림(iziToast 알림)을 표시하고 싶은데, 그것을 실현하는 최선의 방법을 모르겠습니다.

1.- Vuex에서 약속을 반환하고 Vue 컴포넌트의 데이터를 처리해야 합니까?

2.- Vuex 라이브러리(iziToast)를 사용할 수 있습니까?아니면 안티패턴인가요?이거 어떻게 해?

Vuex 액션은 다음과 같습니다.

loginUser({ commit, state }, user) {
        axios.post("/api/v1/user/login", {
            email: user.email,
            password: user.password
        }).then(response => {    
        // Show notification here

        }).catch(error => {

        })
    }

1.- Vuex에서 약속을 반환하고 Vue 컴포넌트의 데이터를 처리해야 합니까?

아니, 그건 Vuex가 하는 방식이 아니야.

보통 흐름은 다음과 같습니다.작업이 시작됩니다. 그러면 Vuex 변환이 트리거되어 저장소가 업데이트되고 getter가 업데이트됩니다.컴포넌트에는 원하는 값에 대한 mapGetter 설정이 있으며 이에 대응합니다.

또는 vuex 사용을 모두 건너뛸 수 있습니다. 이 경우 구성 요소에서 이 작업을 수행하거나 별도의 .js 파일을 사용할 수 있습니다.이 경우 Axios 콜은 약속이기 때문에 반환됩니다.
다음과 같습니다.return axios.post("/api/...

2.- Vuex 라이브러리(iziToast)를 사용할 수 있습니까?아니면 안티패턴인가요?이거 어떻게 해?

iziToast에 대해서는 잘 모르지만 vuex에서 스토어나 getter에 링크할 수 없는 경우 레이아웃 컴포넌트 등 어떤 컴포넌트에서도 접속할 수 있습니다.

예를 들어 vue-izitoast를 사용하는 경우 이를 임의의 컴포넌트에 추가할 수 있습니다.

computed: {
  myMessage() {
    return this.$store.getters.myMessage
  }
}

watch:{
    myMessage(message) {
       if(message !== null){
         $toast.show( message, 'Note:', {position: "bottomLeft"})
       } else {
         this.$toast.destroy(); //not sure if it works, but I assume that might close open toasts
       }
    }
}

vuex의 경우myMessage취득하다

export const store = new Vuex.Store({
  state: {
    myMessage: null
  },
  mutations: {
    setMessage(state, myMessage) {
      state.myMessage = myMessage;
    },
    clearMessage(state) {
      state.myMessage = null;
    }
  },
  getters: {
    myMessage: state => {
      return state.myMessage;
    }
  },
  actions: {
    loginUser({ commit }, user) {
        axios.post("/api/v1/user/login", {
            email: user.email,
            password: user.password
        }).then(response => {    
          commit('setMessage', response.message)
        }).catch(error => {
          // could add a commit for error message here
        })
    },
    clearMessage({commit}) {
      commit('clearMessage')
    }
  }
});

토론에서 @Savlon이 말했듯이vue-izitoast라이브러리는 컴포넌트/vue 인스턴스에서 사용할 수 있도록 설계되어 있기 때문에 Vuex에서 동작하는 유일한 방법은 vue iziToast 이외의 버전을 사용하여 일반 npm 라이브러리로 Import하는 것입니다.

언급URL : https://stackoverflow.com/questions/61434829/show-notification-after-axios-request-is-successful-in-vuex