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

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

作者: HomWang | 来源:发表于2022-08-11 18:38 被阅读0次

    在阅读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>
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/cmjtgrtx.html