Vue.js 中的依赖循环问题

Question

我在 vue.js 项目中遇到 linting 错误问题。我得到的错误如下所示：

/Users/mikecuddy/Desktop/coding/data_science_projects/statues/client/src/store/modules/common.js
   4:1  error    Dependency cycle via @/store/index:4  import/no-cycle

我不知道如何摆脱这个错误。我尝试使用 this.$router 和 this.$store 重命名文件，但没有成功。这是我的一些代码：

路由器 -> index.js: 数据路径是我想要到达的主要路径。请注意，我已将商店导入文件注释掉 - 这确实消除了依赖性错误，但我在执行类似以下操作时遇到了问题：

this.$store.state.common.loginFlag

与导入商店并执行此操作相反：

store.state.common.loginFlag

import Vue from 'vue';
import VueRouter from 'vue-router';
// import store from '../store/index.js';
// import store from '@/store/index';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/data',
    name: 'Data',
    component: () => import('../views/Data.vue'),
    beforeEnter: (to, from, next) => {
      if (this.$store.state.common.loginFlag === false) {
        next('/login');
      } else {
        next();
      }
    },
    beforeRouteLeave: (to, from, next) => {
      if (this.$store.state.common.loginFlag === false) {
        next('/login');
      } else {
        next();
      }
    },
  },
];

const router = new VueRouter({
  routes,
});

export default router;

store/modules/common.js:


import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
import router from '../../router';

Vue.use(Vuex);

const data = {
  userNotFound: false,
  passwordNoMatch: false,
  loginFlag: false,
};

const getters = {
  userNotFound: (state) => state.userNotFound,
  passwordNoMatch: (state) => state.passwordNoMatch,
  loginFlag: (state) => state.loginFlag,
};

const actions = {

  login: ({ commit }, { payload }) => {
    const path = 'http://localhost:5000/login';
    axios.post(path, payload)
      .then((res) => {
        if (res.data.login_flag) {
          commit('session/setUserObject', res.data.user, { root: true });
          commit('setLoginFlag', res.data.login_flag);
          // Tried this:
          router.push{ name: 'Data' }
          // As well as trying this: 
          this.$router.push({ name: 'Data' });
        }
        commit('setNoPasswordMatch', res.data.Password_no_match);
        commit('setUserNotFound', res.data.Not_found);
      })
      .catch((error) => {
        console.log(error);
      });
  },

};

// I have mutations but did not think they'd be needed 
const mutations = {};

export default {
  namespaced: true,
  state: data,
  getters,
  actions,
  mutations,
};

在 common.js 文件中，我尝试注释掉：

import router from '../../router';

这似乎奏效了 - 依赖循环错误消失了，在 router/index.js 文件中我能够到达路线但遇到了问题。$store.state.common.loginFlag 当我从 '@/store/index' 注释掉 import store 时；如果我离开导入： import store from '@/store/index'; 然后我得到依赖周期错误。

我还在这些其他堆栈页面上找到了一些帮助：

我会说我讨厌使用 linters，这就是给我带来问题的原因。

这是 store/index.js 的代码：

import Vue from 'vue';
import Vuex from 'vuex';
import common from './modules/common';
import session from './modules/session';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    common,
    session,
  },
});

Answer 1

这里出现依赖循环的原因似乎是当您在商店模块中导入路由器设置时，路由器又导入了整个商店。可以在路由器中使用商店，但请尝试移动 routing/redirect 逻辑（这些行）：

// Tried this:
router.push{ name: 'Data' }
// As well as trying this: 
this.$router.push({ name: 'Data' });

从 /modules/common.js 到组件或全局路由器挂钩级别，因此您可以避免在商店模块中导入路由器。

Vue.js 中的依赖循环问题

Issue with Dependency cycle via in Vue.js

javascript

router

state

vue.js

vuejs2