Nuxt中如何使用useStorage，实现菜单缓存

Nuxt中如何使用useStorage，参考的文档不多，除了官方的useStorage文档之外，可靠的示例文档不多。今天我就做一个实现菜单缓存的功能。

需求

进入页面，有缓存取缓存(localStorage)，无缓存取接口数据。

这里需要注意的是，如果有缓存，并且接口的数据与缓存不一致时，需要更新到缓存(localStorage)。

utitl工具

import { useStorage } from '@vueuse/core'

export const getMenu = async () => {

	// 请求接口
	const { data: menuData } = await useFetch('https://www.fastmock.site/mock/e8be125258f0f6e31d1432d4e6b66403/api/userMenus')

	// 处理返回数据
	const dataStr = JSON.stringify(menuData.value)

	// 获取localStorage
	const state = useStorage('menu')

	// 如果localStorage为undefined，或者为"undefined"
	if (!state.value || state.value === 'undefined') {
		state.value = dataStr // 设置缓存
	}
	// 如果localStorage中的数据和接口数据不一致
	else if (dataStr !== state.value) {
		state.value = dataStr // 更新缓存
	}

	// 返回数据
	return JSON.parse(state.value)
}

使用

引入util：

import { getMenu } from '~/server/utils/menu'

const nav = ref()

async function fetchMenu() {
    try {
        nav.value = await getMenu()
        // 在这里可以进行后续操作，例如处理菜单数据
    } catch (error) {
        // 处理错误
    }
}
fetchMenu()

模板渲染：

<template v-if="nav">
    <ul>
    <li v-for="(item,index) in nav" :key="index">
        {{ item.name}}
        <ul v-if="item.children">
        <li v-for="(itemSub,indexSub) in item.children" :key="indexSub">
            {{ itemSub.name }}
        </li>
        </ul>
    </li>
    </ul>
</template>

检验：

构建后运行服务器：

yarn run build
node .output/server/index.mjs

查看渲染的网页源码，是否存在接口返回的数据；修改接口数据，再查看渲染的网页源码，是否存在修改接口后的数据。