背景：最近做的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全局错误提示的一点思考
