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全局错误提示的一点思考