Cannot access ‘store‘ before initialization at XXX文件【vue2到vue3升级】store与vueRouter循环引用

😖问题截图如下

import store from '@/store';
const { state } = store;//报错代码位置

😖问题排查思路（错误）：一开始以为是项目缺失初始化store代码，检查下来并没有；然后怀疑文件import顺序前后导致，排查下来也没有；
😖问题排查思路（错误）：测试vue3可以直接引用带store的文件，怀疑vue2和vue3 router和store注册方式不同导致的。
😀问题排查思路：由于还没有实例化Vue，所以只能从main.jsx开始手动注释各个引用文件，搞清楚程序执行顺序（堆栈）

😀原因是循环引用，直接给问题如何解决

因为直接拿的Tdesign的项目，从入口文件出现了循环引用：main.jsx=>axiosInstance=>store=>permission=>router=>store
只需要在router里面不直接引用带store的组件就行，才有（）=>import动态加载组件。
📖正确答案：

{
    path: '/Report/dashboard',
    name: '/Report/dashboard',
    component: () => import('@/pages/Report1/dashboard/base/index.vue'),
    meta: { title: '腾讯的数据大屏' },
},

😅在vue2项目下，下面两种提前引入文件的写法都会出现标题中的报错：

import DashboardBase from ‘@/pages/Report1/dashboard/base/index.vue’;
…
{
path: ‘/Report/dashboard’,
name: ‘/Report/dashboard’,
component: () => DashboardBase,
meta: { title: ‘腾讯的数据大屏’ },
},

import DashboardBase from ‘@/pages/Report1/dashboard/base/index.vue’;
…
{
path: ‘/Report/dashboard’,
name: ‘/Report/dashboard’,
component: DashboardBase,
meta: { title: ‘腾讯的数据大屏’ },
},

✨总结-循环引用会导致XXX文件未初始化

💫对比vue3项目时，没有这个报错的原因

在vue3中的router中，如果使用component: DashboardBase直接引用带store的组件，并不会报错
😖原因是:router直接引用store。但是没有store引用router这样的循环引用。

import store from '@/store';
const { state } = store;//报错代码位置