返回

Nuxt 3: 请求、状态管理和 Cookie 操作指南

前端

Nuxt 3 请求、状态管理和 Cookie 操作指南

引言

Nuxt 3 是一个基于 Vue.js 的现代框架，用于构建通用应用程序。它提供了许多强大的功能，包括简化的请求处理、内置状态管理和集成的 cookie 操作。在本文中，我们将深入探讨这些功能，并提供使用示例。

Nuxt 3 的请求相关内容

Nuxt 3 提供了两个主要方法用于处理 HTTP 请求：fetch 方法和 $fetch 方法。

  • fetch 方法 ：这是一个低级别的 HTTP 请求方法，可以用于任何请求类型。它返回一个 Promise 对象，该对象在请求完成后解析。
  • $fetch 方法 ：这是一个 fetch 方法的语法糖，它简化了请求代码。它将自动处理请求头和凭证。

代码示例

// 使用 fetch 方法
import { fetch } from 'nuxt/app'

const response = await fetch('/api/users')
const data = await response.json()

// 使用 $fetch 方法
import { defineNuxtPlugin } from 'nuxt/app'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('fetch', (url, options) => {
    return fetch(url, options)
  })
})

// 在组件中使用 $fetch 方法
<template>
  <div>
    <h1>{{ users }}</h1>
  </div>
</template>

<script>
export default {
  async setup() {
    const users = await $fetch('/api/users')
    return { users }
  },
}
</script>

状态管理

Nuxt 3 提供了两种主要方法用于管理状态：useState 方法和 Pinia。

  • useState 方法 ：这是一个内置的状态管理方法，它允许你在组件中创建和管理状态。
  • Pinia ：这是一个轻量级的外部状态管理库，它提供了全局状态对象，可以在应用程序的任何组件中访问和更新。

代码示例

使用 useState 方法

import { useState } from 'nuxt/app'

const state = useState({
  count: 0,
})

使用 Pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'

const app = createApp(App)

const pinia = createPinia()

app.use(pinia)

app.mount('#app')

Cookie 管理

Nuxt 3 提供了一个名为 useCookie 的方法，它允许你在组件中创建和管理 cookie。

代码示例

import { useCookie } from 'nuxt/app'

const cookie = useCookie('token')

Token 续期

Token 续期是一种刷新和更新用户授权令牌以保持登录会话的过程。Nuxt 3 可以通过多种方式实现令牌续期。

  • 使用 Axios 续期令牌 ：你可以使用 Axios 库自动续期令牌。
  • 使用 Vuex 续期令牌 ：你可以使用 Vuex 存储和管理令牌，并在需要时自动续期。

代码示例

使用 Axios 续期令牌

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:3000',
})

const refreshToken = async () => {
  const response = await api.post('/auth/refresh-token')
  const token = response.data.token

  // 保存新的令牌
  localStorage.setItem('token', token)
}

setInterval(refreshToken, 1000 * 60 * 60) // 每小时续期一次令牌

使用 Vuex 续期令牌

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    token: null,
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    },
  },
  actions: {
    refreshToken({ commit }) {
      const api = axios.create({
        baseURL: 'http://localhost:3000',
      })

      api.post('/auth/refresh-token').then((response) => {
        const token = response.data.token

        // 保存新的令牌
        commit('setToken', token)
      })
    },
  },
})

setInterval(() => {
  store.dispatch('refreshToken')
}, 1000 * 60 * 60) // 每小时续期一次令牌

总结

Nuxt 3 提供了一套强大的功能用于请求处理、状态管理和 cookie 操作。通过使用这些功能，你可以构建健壮且可扩展的应用程序。

常见问题解答

  1. 如何使用 $fetch 方法获取 JSON 数据？

    const response = await $fetch('/api/users', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
})

const data = await response.json()

  2. 如何使用 Pinia 全局管理状态？

    const store = useStore()

// 在组件中访问和更新全局状态
store.state.count++

  3. 如何使用 useCookie 方法设置 cookie？

    cookie.value = 'my-value'

  4. 如何使用 Axios 自动续期令牌？

    const api = axios.create({
  baseURL: 'http://localhost:3000',
})

api.interceptors.response.use(
  (response) => {
    // 如果令牌即将过期，则刷新令牌
    if (response.status === 401) {
      refreshToken()
    }

    return response
  },
  (error) => {
    // 如果令牌无效，则重定向到登录页面
    if (error.response.status === 403) {
      window.location.href = '/login'
    }

    return Promise.reject(error)
  }
)

  5. 如何使用 Vuex 管理和续期令牌？

    // 在组件中使用 Vuex 令牌
const token = store.state.token

// 续期令牌
store.dispatch('refreshToken')