Dva中models文件夹的高级写法

目录

前言

一、dva是什么？

二、使用步骤

1.models文件夹下的index.ts

2.pages文件夹下的使用

总结

---

前言

Dva中models文件夹的高级写法并且可以把model.ts写在对应的pages页面下，便于管理

一、dva是什么？

dva是一个基于React和Redux的轻量级框架，用于简化应用程序的数据流和状态管理。它的名字来自于“数据流可视化分析”（Data Visualization and Analysis），目的是为了提供一个易于理解和使用的状态管理框架。

dva学习一篇就够了

二、使用步骤

1.models文件夹下的index.ts

代码如下（示例）：

const models = {};
function importAllModels(ctx: __WebpackModuleApi.RequireContext) {
  ctx.keys().forEach((k) => (models[k] = ctx(k).default));
}
importAllModels(require.context("@/pages", true, /model\.ts$/, "sync"));

export default Object.values(models);

这段代码主要实现了在 @/pages 目录下自动导入所有以 model.ts 结尾的文件，并将它们的 default 导出作为数组返回。具体来说，它使用了 Webpack 提供的 require.context() 方法来获取匹配的模块，然后将这些模块的 default 导出作为一个数组返回。

具体的实现过程如下：

1. 首先，定义了一个空对象 models 用于存储导入的模块。

   const models = {};

2. 然后，定义了一个函数 importAllModels()，用于导入符合要求的模块。

   function importAllModels(ctx: __WebpackModuleApi.RequireContext) {
     ctx.keys().forEach((k) => (models[k] = ctx(k).default));
   }

   importAllModels() 函数接受一个 Webpack 的上下文对象 ctx 作为参数，这个上下文对象包含了一些匹配的模块。我们可以使用 ctx.keys() 方法来获取所有匹配的模块路径，然后遍历这些路径，并将模块的 default 导出赋值给 models 对象的相应键值。

3. 最后，使用 require.context() 方法获取匹配的模块，并调用 importAllModels() 函数将这些模块导入到 models 对象中。

   importAllModels(require.context("@/pages", true, /model\.ts$/, "sync"));

   require.context() 方法接受四个参数：

   • 要搜索的目录路径。
   • 是否搜索子目录。
   • 匹配模块的正则表达式。
   • 加载模块的方式。

   在这个例子中，我们指定了搜索 @/pages 目录及其子目录下所有符合 model.ts 正则表达式的文件，并使用同步方式加载这些文件。

4. 最后，使用 Object.values() 方法将 models 对象中的值作为数组返回。

   export default Object.values(models);

   这里使用了 ES6 的 Object.values() 方法将 models 对象中的所有值作为一个数组返回，这个数组中的每个元素都是一个匹配的模块的 default 导出。

2.pages文件夹下的使用

---

 

总结

总的来说，这段代码主要实现了自动导入符合要求的模块，并将它们的 default 导出作为数组返回。它使用了 Webpack 的 require.context() 方法来获取匹配的模块，并使用一个空对象 models 存储导入的模块。最后，使用 Object.values() 方法将 models 对象中的所有值作为一个数组返回。