通过发布订阅解耦

参考

一、 开发中遇到的问题

1. 通信模块(axios)中存在其他耦合模块，比如弹窗组件、路由组件
   1. 思考下自己的项目中是否有根据状态码执行不同的逻辑
      1. 非 200 执行弹窗 message
      2. 404 执行 路由跳转
      3. 退出状态码 -> 清空 token、localstorge、 sessionStorge
      4. token 过期 -> xx
2. 各个模块有自己的职责，如果内容多了会导致耦合严重问题。 整个页面非常杂乱
3. 解决方式
   1. 把动态多变的抽离到一个新的文件。比如状态码
   2. 通过发布订阅模式解耦
      1. 优势：
         1. 各个模块非常的干净，易读。适合长期维护。
         2. 业务多变只要符合当前规范，也很容易维护。
      2. 劣势：
         1. 从集中处理到打散，不好理解(阵痛)

二、 发布订阅模式解耦(中间层)

可以使用 mitt

import  createRouter, createWebHashHistory } from'vue-router';
import emitter from './eventEmitter';

const router = createRouter({
  history: createWebHashHistory(),
  routes: []
})

emitter.on('API:UN_AUTH', () => {
    router.push('/login')
})

export default router;