在 Vuex 中 axios 请求成功后显示通知答案

【问题标题】：Show notification after axios request is successful in Vuex在 Vuex 中 axios 请求成功后显示通知
【发布时间】：2020-08-09 14:07:16
【问题描述】：

我正在使用 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 => {

        })
    }

【问题讨论】：

我用vuex创建了自己的“toast”类型模块，然后在收到响应后调用它。
你如何打开它？我的意思是，您必须将库导入模块吗？
不，你调用 dispatch 方法。这就是我所做的 dispatch('displaySnack', {message: 'Successfully added fee', color: 'success'}, {root: true});
好的，但是如何使用像 iziToast 这样的外部库呢？如何将其导入模块并在 action 中使用它？
我以前从未使用过它。阅读文档，它应该可以帮助您安装它。

标签： vue.js vuejs2 vuex

【解决方案1】：

正如@Savlon 在讨论中所说，vue-izitoast 库是为在组件/vue 实例中使用它而设计的，所以让它工作的唯一方法（在我的例子中是 Vuex）是使用non-vue iziToast version 和将其作为普通的 npm 库导入。

【讨论】：

【解决方案2】：

1.- 我应该从 Vuex 返回一个承诺，然后处理来自我的 Vue 组件的数据吗？

不，这不是 Vuex 的工作方式。

通常流程是这样的：动作开始，这将触发 Vuex 突变，这将更新存储，导致 getter 更新。您的组件将为您正在寻找的值设置 mapGetter 并对其做出反应。

或者，您可以完全跳过使用 vuex，在这种情况下，您可以在组件或单独的 .js 文件中执行此操作。在这种情况下，您将返回 axios 调用，因为这是一个承诺。
像这样：return axios.post("/api/...

2.- 我可以使用 Vuex 的库 (iziToast) 吗？或者这是一种反模式方式？我该怎么做？

我不熟悉 iziToast，但如果无法将其链接到来自 vuex 的 store 或 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 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')
    }
  }
});

【讨论】：