Nuxt3 最新添加文档,让你的应用与redis亲密接触

2022-08-11  本文已影响0人  HomWang

在阅读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>
上一篇 下一篇

猜你喜欢

热点阅读