状态管理 - wangshengliang

关于组件的状态管理，在 Vue 中原生提供了一系列响应式api：

ref
reactive

在 Nuxt 中，提供了一个内置的组合式函数：useState，该内置组件相比原生的 ref，有着以下的优势：

和服务器状态保持一致
轻量级状态管理

useState 的基本用法：

useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>

key: 一个唯一的键，确保数据获取在请求中被正确地去重。如果你不提供键，则会为 useState 的实例生成一个在文件和行号上唯一的键。
init: 当未初始化时，提供状态的初始值的函数。这个函数也可以返回一个 Ref

useState('stuInfo', () => ({
  name: '张三',
  age: 18,
  address: '北京',
}))

useState 会创建一个响应式的状态，并且该状态是一个客户端/服务器端共享的状态。

如果不需要深层的响应式，那么可以将 useState 和 shallowRef 结合：

const state = useState('my-shallow-state', () =>
  shallowRef({ deep: 'not reactive' })
)
// isShallow(state) === true

状态共享

有些时候，我们需要多个组件之间共享同一个状态，此时可以将状态单独抽离到一个组合式函数里面。例如：

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

// composables/use-foo.ts 或 composables/useFoo.ts
// 它将作为 useFoo() 可用（文件名的驼峰形式，不包括扩展名）
export default function () {
  return useState('foo', () => 'bar')
}

在页面中使用：

<template>
  <div>
    {{ foo }}
  </div>
</template>

<script setup lang="ts">
const foo = useFoo()
</script>

使用第三方库

在大型项目中，我们可能会用到一些第三方的状态管理库：

Pinia：官方推荐的Vue状态管理库
Harlem：不可变的全局状态管理库
XState：基于状态机的方法，具有可视化和测试状态逻辑的工具

这些第三方的状态管理库，都与 Nuxt 有着很好的集成，被封装为了模块，使用时直接安装对应的模块即可。不过，并不是所有的项目都需要使用第三方状态管理库，像一些小型的项目，仅仅是为了共享一部分状态，此时使用状态管理库，反而会显得有一点多此一举。所以这个时候就又体现出了 useState 的第二个特点：轻量级状态管理。

-EOF-