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侦听器，参考了下别人的文章，上码： 新建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) } } } App.vue里面获取和监听错误状态 import { mapGetters } from "vuex"; computed: { ...mapGetters(["errorFlag", "errorMsg"]), }, watch: { errorFlag(newFlag, oldFlag) { this.$message.error(this.errorMsg); }, }, 最最关键的一步：在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全局错误提示的一点思考

本文章由javascript技术分享原创和收集