使用 Fuse.js 给 Nuxt 博客添加文档检索

文档检索

1. 背景

之前工作的时候，遗留的老项目中，有看到使用 nuxt ui pro 的搜索组件。但是 nuxt ui pro 是收费组件，项目交接给我的时候， token 实效，不能再使用了，打包部署不上去，后续是 LD 准备淘宝上买个共用的 token ，先打包部署上去再说。

我对文档检索这个功能，之前只知道 algolia ，但是 algolia 是付费的，虽然个人是申请免费使用。不过我看 nuxt ui pro 的文档检索组件，明显不是使用 algolia 的，所以好奇心驱使，想看看 nuxt ui pro 的文档检索组件是怎么实现的。

然后在 nuxt content theme 中，还有这个 nuxt 的博客主题 bloggrify 中，看到了使用 Fuse.js 的实现方式，才开始了解了一下 Fuse.js 。

3. 了解 Fuse.js

之前只知道 algolia ，非常强大，但是需要个人申请免费使用，而且需要调用服务器，不过非常好用，一行代码引入就可以实现文档检索。

这次知道 Fuse.js ，感觉也挺好用，就跟调用接口检索一样，但是检索的时候不需要调用远程服务器，相当于拿到所有数据存到本地了。

Fuse.js 是一个轻量级的模糊搜索库：

零依赖：不需要依赖其他库
强大的模糊搜索：支持近似字符串匹配
灵活的搜索选项：可以自定义搜索模式和权重
支持在浏览器和 Node.js 环境中使用
支持对复杂 JSON 对象的搜索

功能配置项很强大，在代码中也很好集成。

从 Vueuse Fuse Demo 这个示例中，可以简单尝试一下。

总结

其实代码量并不多，但是之前没做过文档检索，都是掉接口得了，所以这次也算是初体验。

后面我又进行了一些改动，比如因为 Fuse.js 的初始化，需要完整的数据。但是这个数据量好大，而且本来为了渲染目录，就查询了一次 queryContent('/post').find() ，这两个地方有了重复请求接口。所以我就二合一了，用一个 usePost 去请求一次数据，放到内存 useState 中，return 出来 posts 和 fetchPosts。业务组件引入使用，fetchPosts 请求数据，在其内部，用一个变量存住 promise ，有重复请求的话，就不请求了，将上一次的 promise 返回。

usePosts.ts

TYPESCRIPT

          import type { AsyncDataRequestStatus } from '#app'
import type { ParsedContent } from '@nuxt/content'

let fetchPromise: Promise<any> | null = null

export function usePosts() {
  const posts = useState<ParsedContent[] | undefined>('posts', () => undefined)
  const status = useState<AsyncDataRequestStatus>('posts-status', () => 'pending')

  const fetchPosts = async () => {
    if (posts.value) 
      return { posts, status }
    
    // 如果已经有一个请求在进行中，直接返回该 promise
    if (fetchPromise) {
      await fetchPromise
      return { posts, status }
    }

    // 创建新的请求
    status.value = 'pending'
    fetchPromise = queryContent('/post').find().then((articles) => {
      posts.value = articles
      status.value = 'success'
    }).catch((error) => {
      status.value = 'error'
      console.error('Error fetching posts:', error)
    }).finally(() => {
      fetchPromise = null
    })

    await fetchPromise
    return { posts, status }
  }

  return {
    posts,
    status,
    fetchPosts,
  }
}

业务组件中：

AppSearch.vue 和 index.vue

TYPESCRIPT

          const { posts, status, fetchPosts } = usePosts()
fetchPosts()

但是后面发现，这样做还是不太合适。因为渲染目录，只需要几个简单的 meta 数据就好了，不需要 body 。而文档检索，需要 body 。同时我又在官网文档中看到了，@nuxt/content 中，有个实验性属性 searchContent ，底层也是使用的 Fuse.js 。所以我还是准备分开，目录查询如果数据量多的话还需要分页。 AppSearch 的话，不知道 @nuxt/content 是怎么优化的查询全部数据。

暂时就改了目录的查询，只查 meta 数据大小只有 1.7k ，多了一个 body 的话，变成了 4.7m 。等 @nuxt/content 的 search 稳定了再改吧，刚才试了一下，数据结构跟之前的 useFuse 稍微有点出入，所以还是先用 useState 缓存一下吧。

使用 Fuse.js 给 Nuxt 博客添加文档检索

1. 背景

2. 读示例代码

3. 了解 Fuse.js

4. 实现博客文档检索

4.1 思路

4.2 页面和交互

4.3 所有代码

总结

补充