【Bug日记】VUE项目vuex store/index.js 引入 router/index.js路由配置引入结果为undefined

🐛 问题描述

Vue项目结合element UI 搭建后台管理系统，再vuex 的store/index.js 文件中引入router/index.js初始路由表，结果后台打印引入结果为undefined。详细见图：

Demo代码如下：

• router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import Layout from '../views/Layout/Index.vue';
Vue.use(VueRouter);

const initRouterMap = [
	{
	  path: '/UserCenter',
	  component: Layout,
	  redirect: '/UserCenter',
	  hidden: false,
	  children: [
	    {
	      path: '/UserMsg',
	      name: 'UserMsg',
		  meta:{title:'个人中心'},
	      component: () => import('@/views/UserCenter/UserMsg.vue')
	    }
	  ]
	},
	{
	  path: '/404',
	  name: '404',
	  hidden: false,
	  meta: { title: '404' },
	  component: () => import('@/views/404.vue')
	},
	{
	  path: '*',
	  redirect: '/404'
	},
	{
	  path: '/login',
	  name: 'login',
	  hidden: false,
	  meta: { title: '登录' },
	  component: () => import('@/views/Login/Login.vue')
	},
	{
	  path: '/password',
	  name: 'password',
	  hidden: false,
	  meta: { title: '找回密码' },
	  component: () => import('@/views/Login/Password.vue')
	}
]
export { initRouterMap };



const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:initRouterMap
})

export default router 
           

• store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

import { initRouterMap }   from "../router";
console.log('initRouterMap: ', initRouterMap);
           

从代码来看就是简单的export 和 import的使用。但是却发生了无法理解的问题，为什么结果打印出来是

undefined

呢？

• 怪异现象

1. 通过

   import * as A from "../router

   方式引入，控制台打印A，结果A正常显示，但是打印

   A.initRouterMap

   结果仍为

   undefined

import * as A    from "../router";
	console.log('A: ', A);
	console.log('initRouterMap: ', A.initRouterMap);
           

• 打印结果

  

1. 在store下新建

   demo.js

   并将i

   ndex.js

   拷贝至

   demo.js

   中，然后再

   store/index.js

   中引入

   demo.js

   ,这时结果能正确打印。、

📌问题原因

通过排查发现，除了在

store/index.js

中引用了

router/index.js

外，在

main.js

中同时应用了

store/index.js

和

router/index.js

文件

• main.js

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

会不会时main.js中使用这两个文件时导致了内容错乱呢？

• 屏蔽

  main.js

  中对

  router/index.js

  的引用。单独引用

  store/index.js

  ，这时

  store/index.js

  中能正确打印变量内容，但显然这不是我想要的结果
• 接着交换

  main.js

  中对

  store/index.js

  和

  router/index.js

  的引用顺序，此时

  store/index.js

  中仍能正确打印变量内容。OK问题解决

🏁 问题解决

• 交换main.js中store/index和router/index.js的应用顺序

import store from './store'; //先引用store
import router from './router'; // 后引用router
           

⭐ 问题引发的原因

问题背后的真正原因还有待挖掘

（问题原因待续）