Показать уведомление после того, как топор ios запрос успешно выполнен в Vuex

Question

Я использую Vuex для хранения некоторых данных. У меня есть действие для входа в мое приложение. Когда запрос выполнен успешно, я хочу отобразить уведомление ( iziToast уведомление), но я не знаю, каков наилучший способ добиться этого.

1.- Должен ли я вернуть обещание от Vuex, а затем обработать данные из моего Vue компонента?

2.- Могу ли я использовать библиотеку ( iziToast ) из Vuex? Или это анти-паттерн? Как я могу это сделать?

Это мое действие Vuex:

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

        }).catch(error => {

        })
    }

Answer 1

Как сказал @Savlon в обсуждении, библиотека vue-izitoast была создана для использования в экземплярах компонентов / vue, поэтому единственный способ заставить ее работать (в моем случае в Vuex) - это использовать non- vue iziToast версия и импорт ее в виде обычной npm библиотеки.

Answer 2

1.- Должен ли я вернуть обещание от Vuex и затем обработать данные из моего Vue компонента?

Нет, Vuex работает не так.

Обычно поток выглядит примерно так: начинается действие, которое вызывает мутацию Vuex, которая обновляет хранилище, вызывая обновление получателя. У вашего компонента будет настройка mapGetter для искомого значения и реакция на него.

В качестве альтернативы, вы можете вообще пропустить использование vuex, в этом случае вы можете сделать это в компоненте или отдельно. js файл. В этом случае вы бы вернули вызов ax ios, поскольку это обещание.
примерно так: return axios.post("/api/...

2.- Могу ли я использовать библиотеку (iziToast) из Vuex ? Или это анти-паттерн? Как я могу это сделать?

Я не знаком с iziToast, но если нет способа связать его с магазином или получателем из vuex, вы можете подключить их через любой компонент, например Компонент компоновки. Например,

, если вы используете 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 getter

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