55 多页签数据状态管理 - udo-bit/naive_admin_pro GitHub Wiki

目标

完成多页签路由页签功能。

开发

首先我们需要创建一个组合式api的方法，用来管理我们的状态信息。
在composable下创建一个multi-tab-state.ts的文件。
我们状态管理还是采用和菜单一样的管理方式，使用依赖注入的方式，之前我们依赖注入采用的是vueuse提供给我们的方法，这次我们就不采用他给我们提供的方法进行依赖注入了，我们自己来实现一下。
首先我们先来创建一个方法如下：

export const useMultiTabProvider = () => {
  const state = reactive({
    // tab列表
    tabList: [],
    // 选中的数据
    current: '',
  })
  // 返回选中的状态信息
  return state
}

在这里我们就需要将我们的状态信息进行依赖注入，那么我们怎么进行依赖注入呢。
在vue中给我们提供了provider的方法，第一个参数可以是一个字符串也可以是一个Symbol类型，我们这里为了保证key的唯一性，我们就需要使用Symbol类型进行处理。
首先我们在layouts中的multi-tab中创建一个type.ts的文件。
为了方便我们后续开发，我们最好给我们的依赖注入定义一些类型。在vue中也给我提供了相应的助手类型。

import type { InjectionKey } from 'vue'
import type { RouteLocationNormalized } from 'vue-router'

export interface TabItem {
  // 路由地址
  path: string
  // 显示的名称
  tabTitle?: string
  // 存储路由信息
  route: Omit<RouteLocationNormalized, 'matched'>
}

export interface MultiTabStore {
  tabList: TabItem[]
  current: string
}

// 其中接收一个泛型，我们把我们自己定义的类型给他传入进去
export const MULTI_TAB_STORE_KEY: InjectionKey<MultiTabStore> = Symbol('multi-tab')

我们既然有了provider方法给我们提供状态管理，那么我们是不是还需要一个获取状态的方法，在vue中还给我们提供了一个方法叫inject方法，用于获取我们注入到子组件的数据。

export const useMultiTabInject = () => {
  // 给他加一个！我们确定是一定有值的
  return inject(MULTI_TAB_STORE_KEY)!
}

最后我们在App.vue中进行进行注入

const appStore = useAppStore()
const { layoutTheme, overridesTheme } = storeToRefs(appStore)
useAutoDark()
const { naiveLocale } = useAutoLang()
useMenuStateProvider()
useMultiTabProvider()

然后我们在multi-tab中引入我们获取数据状态的api

<script lang="ts" setup>
  const state = useMultiTabInject()
  console.log(state)
</script>

刷新页面，测试能不能正常拿到数据。

⚠️ **GitHub.com Fallback** ⚠️