# umi-basic-2206

**Repository Path**: connerljlx_admin/umi-basic-2206

## Basic Information

- **Project Name**: umi-basic-2206
- **Description**: 2206班umi基础
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-02-22
- **Last Updated**: 2023-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 启动umi项目
```js
npx create-umi@latest
```
# 运行项目
```js
npm run dev
```
# 修改 启动端口
package.json
```json
 "dev": "set PORT=8888 && umi dev",
```
# 项目目录结构
```
src
  .umi // 目录开发时 产生临时文件存储目录 不要动不要动
  config
    config.ts // umi配置文件 和 根目录下 .umirc.ts二选一
  assets // 开发时存储静态资源的目录
  layouts // 根组件 一级路由出口在这里
  pages // 路由组件的目录
  .umirc.ts  // umi配置文件 和 根目录下 config/config.ts二选一
```

# 路由
+ 约定式路由

无需定义路由 只需要在 pages中 定义 路由组件即可，自动生成 路由
```js
pages
  index.tsx
  news.tsx

// 自动生成两个路由
[
  {
    path: '/',
    component: '@/pages/index'
  },
  {
    path: '/news',
    component: '@/pages/news'
  }
]
```
路由组件如果定义成目录 但是 对应组件 命名一定是index
```js
pages
  index.tsx
  news
    index.tsx

// 自动生成两个路由
[
  {
    path: '/',
    component: '@/pages/index'
  },
  {
    path: '/news',
    component: '@/pages/news'
  }
]
```


```js
pages
  index.tsx
  news
    index.tsx
    a.tsx

// 自动生成两个路由
[
  {
    path: '/',
    component: '@/pages/index'
  },
  {
    path: '/news',
    component: '@/pages/news'
  },
  {
    path: '/news/a',
    component: '@/pages/news/a'
  }
]
```

### 配置型路由
+ 路由基础
```js
{
  path: '/',
  component: 'home' // 自动去pages中查找 home.tsx 或者 home/index.tsx
},
{
  path: '/news',
  component: 'news',
  // 定义子路由 子路由 组件一定要存储在 父路由组件 目录中
  routes: [
    {
      path: '/news/native',
      component: 'native', // 支持写法三种 1直接子路由组件名 2/news/native 3 @/pages/news/native
    }
  ]
}
// 配置子路由一定要在 父路由中 定义 Outlet组件作为出口
```

+ 路由重定向
```js
{
      path: '/',
      redirect: '/home'
    }
```

+ 路由wrappers
包裹路由， 访问目标路由组件之前，会先 访问 wrappers中的组件
实现原理：
  将 目标路由组件 包装成了 wrappers中的 组件的 子路由组件

  wrappers中的组件 如果定义了 Outlet则 目标路由组件正常渲染，否则不渲染

使用场景：
  常用语 做登录鉴权

```js
{
      path: '/about',
      wrappers: [
        '@/wrappers/auth'
      ],
      component: 'about'
    }
```
在 src/wrappers/auth 组件
```js
import React from 'react'
import { Outlet, Navigate } from 'umi'
import { isLogin } from '@/utils'
export default function auth() {
  return (
    <div>
      {
        isLogin()
        ?
        <Outlet/>
        :
        <Navigate to="/login"/>
      }
    </div>
  )
}

```

# dva 基于redux封装 状态管理插件
一般会结合umi一起使用
## umi项目中安装dva
umi微生成器 使用
1 安装umi
```js
npm i umi -g
```
2 在 项目目录下打开cmd
```js
umi g 生成插件
```

# 定义dva model 一个model相当于 @reduxjs/toolkit 一个切片，相当于 vuex中一个模块
```js

export default {
  // 命名名字 reducer 自动重命名为 count/add
  namespace: 'count',
  // 相当于vuex中 state
  state: {
    num: 0,
    cates: []
  },
  // 相当于vuex中的mutations 只要mutation才可以修改数据
  reducers: {
    // reducer 触发 这个reducer 修改 state reducer 每一次返回一个新值
    add(state: any, action: any) {
      state.num += action.num;
      // 一定要返回新的state
      return {
        ...state
      }
    },
    
  }
}
        
```
+ 组件中 获取state 和 dispatch action触发 reducer 修改状态
  - 获取state
  ```js
    const num = useSelector(state => state.count.num);
    // 提交action 修改state
    dispatch({
      type: 'count/add', // 我要触发 哪个reducer
      num: 10
    })
  ``

+ dva处理异步 类比 vuex中的action

```js
const fetchCates = (params = {}) => {
  return axios.get('https://api.it120.cc/conner/cms/category/list', {params})
}
export default {
  namespace: 'count',
  state: {
    cates: []
  },
  reducers: {
    initCates (state, action) {
      state.cates = action.data;
      return {
        ...state
      }
    }
  },
  effects: {
    // call调用异步请求函数 put（相当于vuex中的commit） 提交 普通 reducer将获取数据 使用reducer修改
    *getCates(action, {call, put}) {
      const res = yield call(fetchCates, action.params);
      // 提交普通reducer将值传入 修改state
      if (res.data.code === 200) {
        yield put({
          type: 'initCates', // 这里不加 模块名
          data: res.data.data
        })
      }
    }
  }
}
```
+ 组件中触发异步的 effect
```js
dispatch({
  type: 'count/getCates',
  params: {
    page: 1,
    pageSize: 10
  }
})
```