Vue.js中的依賴回圈問題

我在 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;

商店/模塊/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';

and that seemed to work - got the Dependency cycle error to go away and in the router/index.js file I was able to get to the route but had an issue with this.$store.state.common.loginFlag when I commented out import store from '@/store/index'; If I leave in the import of: import store from '@/store/index'; then I get the dependency cycle error.

I've also found some help at these other stack pages:

TypeError: Cannot read properties of undefined (reading '$router') vuejs

dependency cycle detected import/no-cycle

I will say that I hate using linters and that's what's giving me the problem here.

Here is the code for 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,
  },
});

uj5u.com熱心網友回復：

看起來這里依賴回圈的原因是當您在商店模塊中匯入路由器設定時，路由器又匯入整個商店。可以在路由器中使用存盤，但嘗試移動路由/重定向邏輯（這些行）：

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

from/modules/common.js到組件或全域路由器掛鉤級別，因此您可以避免在 store 模塊中匯入路由器。

標籤：javascript vue.js vuejs2 state router

上一篇：試圖制作一個程式來修復另一個程式的代碼

下一篇：如何使用Vuejs在復選框中定義為默認選中