Vue3+TS Day36 - 带类型提示的useStore、后

1、如何在vue的template中，使用【@】给【img】添加【src】？

• 需要把【@】写成 【~@】

<img class="img" src="~@/assets/img/logo.svg" alt="logo" />

2、由于vuex对ts支持不佳，useStore没有类型提示，怎么封装一个有类型提示的？

// types.ts
import { ILoginState } from './login/types'

export interface IRootState {
  name: string
  age: number
}

export interface IRootWithModule {
  login: ILoginState
}

export type IStoreType = IRootState & IRootWithModule

export function useStore(): Store<IStoreType> {
  return useVuexStore()
}

3、在main里面，如何把header的事件传递给nav-menu？

• ①通过事件总线
• ②先通过【emits】传给main，再通过【props】传递给nav-menu

4、【重点】后台管理系统，权限菜单路由管理的三种方案，渐渐优化？

• ①直接注册所有路由，然后通过角色判断具体菜单是否展示！
• 弊端：能通过URL访问到不该访问的菜单
• ②前端代码里面写好哪些角色有注册哪些路由
• 弊端：新增角色需要增加对应角色的路由代码，并且要发布版本
• ③前端拿到角色对应的菜单数据，然后动态生成路由列表，进行注册。
• 目前比较完美的方案

5、【重点】由用户菜单动态生成路由的方式也有两种？

• ① 由后端同时返回path和component，前端进行注册
• ②由后端返回path，前端维护path和component的映射表
• 第二种方式较好，因为前端可以自己随时重构代码结构，而不需要依赖于后端数据

image.png

6、【扩展】为什么后端表与表出现‘多对多’的关系，就需要中间加一张关系表？

image.png