Slidev项目中useSlideContext与useNav的正确使用方式

Slidev是一个基于Vue.js的现代化演示文稿工具，它提供了丰富的API和组合式函数(Composable)来帮助开发者构建交互式幻灯片。在使用组合式API时，开发者可能会遇到一些命名混淆的情况，特别是与幻灯片上下文相关的函数。

核心组合式函数解析

在Slidev的Vue组件中，开发者经常需要访问幻灯片的核心上下文信息。官方文档中提到的useSlidevContext实际上应该是useSlideContext函数，这是获取幻灯片基础上下文的关键API。

正确导入方式

<script setup>
import { useDarkMode, useNav, useSlideContext } from '@slidev/client'

const { $slidev } = useSlideContext()
const { currentSlideRoute } = useNav()
const { isDark } = useDarkMode()
</script>

函数功能说明

1. useSlideContext
   这是获取幻灯片基础上下文的核心函数，返回的对象中包含$slidev属性，该属性提供了访问当前幻灯片状态的各种方法和属性。

2. useNav
   用于获取幻灯片导航相关信息，如currentSlideRoute可以获取当前幻灯片的路径信息，便于开发者实现自定义导航逻辑。

3. useDarkMode
   提供对幻灯片主题模式(暗黑/明亮)的响应式访问，isDark是一个响应式引用(ref)，可以实时反映当前的主题状态。

常见使用场景

开发者通常会结合这些组合式函数来实现以下功能：

• 创建自定义导航组件
• 根据当前幻灯片位置显示特定内容
• 实现主题切换按钮
• 构建复杂的幻灯片交互逻辑

类型安全提示

当使用TypeScript开发Slidev插件或自定义组件时，可以导入相应的类型定义来获得更好的类型提示和代码补全。

import type { SlidevContext } from '@slidev/client'

通过正确使用这些组合式API，开发者可以更高效地构建功能丰富、交互性强的Slidev演示文稿。