Nuxt3学习总结（04）

状态管理 useState

useState是一个ssr友好的ref替换,用于创建响应式的且服务端友好的跨组件状态,它的值将在服务器端呈现之后保存(在客户端hydration作用期间)，并使用唯一的键在所有组件之间共享。

因为useState中的数据将被序列化为JSON，所以它不包含任何不能序列化的内容，例如类、函数或符号，这一点很重要。

useState()的两种用法，一个接收提供初始值的工厂函数，另一个多了唯一的 key 用于缓存数据。

useState 返回值是一个 Ref 类型。

使用

新建composables文件夹，新建count.ts

export const counter=()=>useState('count',()=>0)

这样我们就能在页面中使用该状态，以及对count进行操作

const count=counter();

使用Pinia

安装

使用yarn或npm 安装pinia

yarn add @pinia/nuxt

添加配置文件

修改 nuxt.config.ts配置文件，自动引入 defineStore(), storeToRefs()，这样后面就不用再引用了

export default defineNuxtConfig({
  modules: [
    // 引入 Pinia
    [
      "@pinia/nuxt",
      {
        autoImports: [
          // 自动引入 `defineStore(), storeToRefs()`
          "defineStore",
          "storeToRefs"
        ],
      },
    ]
  ],
});

创建store

新建store文件夹，新建count.ts，使用defineStore定义一个store。

export const useCount = defineStore("count", {
  state: () => ({
    count: 1
  })
});

使用store

接着，在您的页面组件中使用状态时，您可以使用 useStore 函数从 pinia 中获取 store 实例。在页面中引用store，并使用storeToRefs转为ref，这样就可以在页面中使用了。

import { useCount } from '~/store/count';
// 获取状态，转换为 Ref，其他代码无需改变
const store=useCount();
const {count} = storeToRefs(store);

错误处理

Nuxt 3

1、Vue渲染生命周期中的错误(SSR + SPA)
2、API或Nitro服务器生命周期中的错误
3、服务器和客户端启动错误(SSR + SPA)

Vue渲染生命周期中的错误

Nuxt提供了一个vue:error钩子，如果任何错误传播到顶层，该钩子将被调用,也可以通过vueApp.config.errorHandler提供全局处理程序。它将接收所有Vue错误。

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.config.errorHandler = (error, context) => {
       console.log('vue error')
    }

    nuxtApp.hook('vue:error', (..._args) => {
        console.log('vue:error')
    })
})
  

服务器和客户端启动错误

app:error：整个应用层面的错误捕获。

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook('app:error', (..._args) => {
        console.log('app:error')
    })
})

自定义error页面

Nuxt遇到错误时，无论是在服务器生命周期中，还是在呈现您的Vue应用程序(SSR和SPA)时，它都会呈现一个JSON响应(如果请求带有Accept: application/json标头)或一个HTML错误页面。这对用户来说并不友好，因此我们需要自定义一个错误页面，展示给用户。

createError

如果是服务端发生错误，可以使用 createError 方法抛出异常，然后在客户端处理展示对应的页面。如果你抛出一个用createError创建的错误:在服务器端，它将触发一个全屏错误页面，你可以用clearError清除。
在客户端，它会抛出一个非致命的错误让你处理。如果你需要触发一个全屏错误页面，那么你可以通过设置fatal: true来实现

    function createError (err: { cause, data, message, name, stack, statusCode, statusMessage, fatal }): Error

    throw createError({
      statusCode: 400,
      statusMessage: '服务器内部错误！',
    })

在前端页面获取error信息

// 添加 error
const { data, pending, error } = await useAsyncData("post", fetchPost);
// 获取服务端返回的错误信息
const errorMsg = computed(() => (error.value as NuxtError).data.statusMessage)

使用错误页面

在项目根目录创建一个 error.vue,这样发生错误将会跳转到这个自定义错误页面。该页面会接收一个包含错误信息的 error 属性。

showError

Nuxt 提供了 showError 方法显示全屏错误，传递一个字符串或者错误对象即可。

showError('文件不存在')
showError(new Error('文件不存在'))

clearError

这个函数将清除当前处理的Nuxt错误。它还有一个可选的重定向路径。

function clearError (options?: { redirect?: string }): Promise
const handleError = () => clearError({ redirect: "/" });

NuxtErrorBoundary

Nuxt还提供了一个组件，允许您处理应用程序中的客户端错误，而不用用错误页面替换整个网站。我们可以把 作为容器组件将内容包起来，其默认插槽中发生的错误会被捕获，避免向上冒泡，并且渲染 error 插槽。