全局响应式数据

所谓全局响应式数据，就是当一个变量发生数据变化时，所有引用该变量的地方都相应变化。比如一个变量let a = 3 当 a 的值变成 4 时，所有引用 a 的地方都变成 4 。我们经常用的 pinia 就可以实现全局响应式数据。nuxt3中有几种配置响应式数据的方式。

app.config.ts

这个文件需要我们自己创建在项目根目录，一般用作公共变量配置，这里面的变量是响应式的，不仅在运行时可以访问，还可以改变。例如下面的配置范例

1
2
3
4
5
6
7
8
9
export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

实际上，nuxt.config.ts 中有个 appConfig 选项可以起到相同的作用。

访问 app.config.ts 中的变量：

1
const appConfig = useAppConfig()

useState()

useStae() 是 nuxt3 内置的状态管理器。用于创建响应式的且服务端友好的跨组件状态。

可以看到 useState()有两个重载，一个接收提供初始值的工厂函数，另一个多了唯一的 key 用于缓存数据，而返回值是一个 Ref 类型。

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

我来看下 useState() 的用法，可以在 composables 目录中创建一个 composable，并在里面导出一个函数，该函数由useState()返回全局状态，例如，composables/counter.ts：

1
export const useCounter = () => useState('count', () => 1)

接下啦在 vue 组件中使用 useCounter 这个变量

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div class="p-4">
    	Counter: {{ counter }} 
      <NButton @click="counter++; " >+</NButton>
      <NButton @click="counter--; " >-</NButton>
  </div>
</template>
<script setup lang="ts">
// 全局状态
const counter = useCounter();
</script>

pinia

pinia不是nuxt3内置的组件，需要安装yarn add @pinia/nuxt