vue项目，eslint循环引用的问题如何解决？

  • Z时代
  • 2024-02-05
  • 分类：IT

vue项目，使用eslint，引入了airbnb规范，有一条规则是import/no-cycle，不可以循环引用。
但是在代码里有这样一种场景

// router需要引入vue页面，注册路由
const routes = [
  {
    path: '/signIn',
    component: () => import('../views/signIn'),
  },
  ...
];
// vue页面需要引入定义的接口，执行各种操作
import api from '@/api/user';
export default {
  methods: {
    handleSignIn() {
      const res = await api.signIn(...);
    }
  },
};
// 接口需要引入封装的axios，里面封装好了一些方法配置
import request from './request';
const api = {
  signIn: (...) => request.post(...),
};
// 封装的axios需要引入router，对router执行一些操作，比如过期跳登录页等
import axios from 'axios';
import router from '@/router';
axios.interceptors.response.use(
  () => {},
  ({ response }) => {
    ...
    if (response.status === 401) 
      router.push({ path: '/signIn' });
    }
  },
);

这个场景就会存在循环引用的问题，如果不关这条规则，有什么写法或者设计可以解决呢？

回答：

import Vue from 'vue';
export const EventBus = new Vue();

在axios的拦截器中触发事件：

import axios from 'axios';
import { EventBus } from './event-bus.js';
axios.interceptors.response.use(
  () => {},
  ({ response }) => {
    if (response.status === 401) {
      EventBus.$emit('unauthorized');
    }
  },
);

在路由配置中监听这个事件：

import { EventBus } from './event-bus.js';
import router from './router';
EventBus.$on('unauthorized', () => {
  router.push({ path: '/signIn' });
});

以上是 vue项目，eslint循环引用的问题如何解决？ 的全部内容， 来源链接： utcz.com/p/934576.html

回到顶部