@equota/plugin-keep-alive v0.0.1-beta.2

@equota/plugin-keep-alive

umi 中实现 keep-alive 功能的插件

Install

Using npm:

$ npm install --save-dev @equota/plugin-keep-alive

or using yarn:

$ yarn add @equota/plugin-keep-alive --dev

启用方式

配置插件开启

export default {
  plugins: ['@equota/plugin-keep-alive'],
};

介绍

本插件不可直接使用，必须搭配 @umijs/plugin-model 一起使用。

配置

扩展的路由配置

插件会基于 umi 的路由，封装了配置项。

• keepAliveLayout

  布局所在的位置，需要在菜单中只隐藏此项，子项往上提。（配和@umijs/plugin-layout使用时不用处理菜单）

• keepAlive

  需要使用 keepAlive 的路由

//config/route.ts
export default [
  {
    path: '/',
    keepAliveLayout: true,
    routes: [
      {
        path: '/management',
        name: '设备管理',
        icon: 'appstore',
        routes: [
          {
            path: '/management/index',
            name: '管理1',
            component: '@/pages/home',
          },
          {
            path: '/management/Two',
            name: '管理2',
            keepAlive: true, // keepAlive
            component: '@/pages/home',
          },
          {
            path: '/management/Three',
            name: '管理3',
            keepAlive: true, // keepAlive
            component: '@/pages/home',
          },
          {
            path: '/management',
            redirect: '/management/index',
          },
        ],
      },
    ],
  },
];

API

useModel

配合 useModel 获取 keepAliveElements 和 dropByCacheKey 方法

import { useModel } from 'umi';

export default () => {
  const { keepAliveElements, dropByCacheKey } = useModel('@keepAlive');

  return <>...</>;
};

keepAliveElements

• Type: Object
• Default: {}

keepAlive 中保存的 elements

dropByCacheKey

• Type: (path: string) => void

移除缓存的页面

import { useEffect } from 'react';
import { useModel } from 'umi';

export default () => {
  const { dropByCacheKey } = useModel('@keepAlive');

  useEffect(() => {
    if (pathname) {
      dropByCacheKey('/list/demo');
      // dropByCacheKey('/list/details/:id');
    }
  }, [pathname]);

  return <>...</>;
};