页面级别 store

[zhangfujin]

Summary | 概述

在页面级别 store 使用遇到的问题 1、routes.js，所有的页面引入都要在这个文件中引入。如果通过其他文件引入则页面级 store 使用不了，报错。 2、routes.js 中使用别名的方式引入页面，在window 系统中会报错

Motivation | 背景

1、对于问题1。应用会有很多页面。如果全都在 routes 中引入会导致该文件造成臃肿

Usage example | 使用示例

No response

Detailed design | 方案设计

如：我的页面有20个，会分成4类页面。分别用4个文件表示。 在routes.js 中分别从4个文件中引入

Additional context | 额外信息

No response

[ClarkXia]

文字描述不够清晰，最好配合部分代码

[zhangfujin]

一、对于第一个问题： 1、如下目录

│___src /          
│    │──  pages /       
│    │       └──pageA / 
│    │              └── index.jsx
│    │──  route-configs /                
│    │       └── routeA.js              
│    │── routes.js

2、routeA.js 中的内容如下

import { lazy } from 'react';
const pageA= lazy(() => import('./pages/pageA'));
export default [
   {
      path: '/pageA',
      title: 'pageA',
      component: PageA
   }
];

3、routes.js 中的内容如下

import routerA from ’./route-configs‘
export default [
  ...routerA
];

如上述代码。当我配置好 pageA 页面的页面级的 store 运行起来会报错。如果我把 src/route-configs/routeA.js 中的内容完全放到 src/routes.js 中，如下 src/routes.js 的修改，修改好后页面级 store 就可以正常使用了

import { lazy } from 'react';
const pageA= lazy(() => import('./pages/pageA'));
export default [
   {
      path: '/pageA',
      title: 'pageA',
      component: PageA
   }
];

二、对于上面一的示例 src/routes.js 文件中，使用别名的方式导入，在window系统中页面级的store 会报错，mac 正常使用

import { lazy } from 'react';
const pageA= lazy(() => import('@/pages/pageA'));  // 这里使用别名 ( @ ) 的方式导入
export default [
   {
      path: '/pageA',
      title: 'pageA',
      component: PageA
   }
];

三、当我把页面 src/pages/pageA 的目录改成 src/pages/page-a 页面的文件夹用横线 “-” 连接起来，页面级的 store 也是不能正常使用，会报错

上面问题的报错全都是报这个错误