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

【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);

• 打印结果
  

2. 在store下新建demo.js并将index.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

⭐ 问题引发的原因

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

---

（问题原因待续）