Vue+Vuex 实现全局统一错误提示

背景：最近做的Vue项目里需要实现全局统一错误提示组件

之前的错误提示统一放在axios封装的组件里，因为请求的时候无法访问vue实例，只好单独引入实现。

法一：引入element-ui样式

import { Message } from 'element-ui';
service.interceptors.response.use(response => {
        //status:2xx
        return response.data;
}, err => {
    //status:outside the range of 2xx 
    if (err && err.response) {
        //各种常见的错误类型判断
        err.message = '请求错误'
    } else {
        err.message = '网络出现问题，请稍后重试'
    }
    Message.error(err.message);
})

法二：引入vue，进行实例化后调用element-ui（main.js里面处理过）

import Vue from 'vue'
new Vue().$message.error(err.message);

按照上述思路，如果使用新封装的全局统一错误提示组件,就要在请求的时候引入这个组件，像引入element-ui里的Message一样。这就比较麻烦了，挂载到哪个 DOM上？body?为什么不能挂载到当前组件的节点？

此路不通，不是最佳实现办法，需要转换下思路了：能不能在根组件App.vue中引入错误组件，通过某种状态触发呢？恰好Vue里有watch侦听器，参考了下别人的文章，上码：

1. 新建store---->error.js,需要在store/index.js里引用

   export default {
   state: {
   flag: false,
   msg: ‘’
   },
   getters:{
   // 统一错误信息
   errorFlag: state => state.flag,
   errorMsg: state => state.msg
   },
   mutations: {
   changeFlag(state, msg) {
   state.msg = msg
   state.flag = !state.flag
   },
   },
   actions: {
   changeFlag({ commit, rootState }, msg) {
   commit(‘changeFlag’, msg)
   }
   }
   }

2. App.vue里面获取和监听错误状态

   import { mapGetters } from “vuex”;
   computed: {
   …mapGetters([“errorFlag”, “errorMsg”]),
   },
   watch: {
   errorFlag(newFlag, oldFlag) {
   this.$message.error(this.errorMsg);
   },
   },

3. 最最关键的一步：在axios组件触发错误信息更新

   import store from ‘…/store/index’
   //中间代码省略
   if (err && err.response) {
   //各种常见的错误类型判断
   err.message = ‘请求错误’
   } else {
   err.message = ‘网络出现问题，请稍后重试’
   }
   store.dispatch(‘changeFlag’, err.message);

这样在App.vue 里面就可以引入封装好的统一的错误组件，将this.$message换掉就ok了。

参考：
[Vue全局错误提示的一点思考]