在阅读Nuxt3源码时,突然发现nitro这个功能下面有storage,很好奇,我就一直找,直到发现redis、fs等等还有很多
然后直接上手写demo,demo完成,测试成功,那就分享并更新nuxt3文档,让大家一起嗨。
Nuxt3真心很不错,自己造了很多核心底层服务的轮子,让我们拭目以待吧
icon: IconDirectory
title: server
head.title: Server directory
Server directory
::ReadMore{link="/guide/features/server-routes"}
nitro
Create a new file in nuxt.config.ts
:
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
nitro: {
storage: {
'redis': {
driver: 'redis',
/* redis connector options */
port: 6379, // Redis port
host: "127.0.0.1", // Redis host
username: "", // needs Redis >= 6
password: "",
db: 0, // Defaults to 0
},
}
}
})
:LinkExample{link="https://nitro.unjs.io/guide/storage.html#defining-mountpoints"}
Example
Create a new file in server/api/test.post.ts
:
export default async (req, res) => {
await useStorage().setItem('redis:nuxt3-redis', { hello: 'wallet' })
return 'Success'
}
Create a new file in server/api/test.get.ts
:
export default async (req, res) => {
const data = await useStorage().getItem('redis:nuxt3-redis')
return data
}
Create a new file in app.vue
:
<template>
<div>
<div>Post state: {{resDataSuccess}}</div>
<div>Get Data: {{ resData.text }}</div>
</div>
</template>
<script setup lang="ts">
const { data: resDataSuccess } = await useFetch(
'/api/test',
{
method: 'post',
body: {
text: 'Welcome To Nuxt3'
}
}
)
const { data: resData } = await useFetch('/api/test')
</script>
网友评论