【Nuxt3系列十】状态管理

Nuxt提供了useState方法来创建响应式和对SSR友好的共享状态

useState的值在服务端渲染后保存，并使用唯一的键在所有组件中共享。

最佳实践

警告

永远都不要在 <script setup> 或者 setup()外定义const state = ref 例如export myState = ref({}) 可能会导致服务器上的请求之间共享状态，并导致内存泄漏

正确做法 const useX = () => useState('x')

例子

基本用法

在这个例子中，我们使用了一个组件本地的计数器状态。任何其他使用useState('counter')都会共享这个状态

<script setup lang="ts">
const counter = useState('counter', () => Math.round(Math.random() * 1000))
</script>

<template>
  <div>
    Counter: {{ counter }}
    <button @click="counter++">
      +
    </button>
    <button @click="counter--">
      -
    </button>
  </div>
</template>

要使得缓存状态全局失效，可以使用clearNuxtState

初始化状态

大多数时候，你会希望使用异步函数来初始化状态，你可以使用callOnce来实现这一点

<script setup lang="ts">
const websiteConfig = useState('config')

await callOnce(async () => {
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>

和Pinia一起用

在这个例子中，我们利用Pinia创建一个全局的store，然后在整个应用程序里面使用。

store/website.ts

export const useWebsiteStore = defineStore('websiteStore', {
  state: () => ({
    name: '',
    description: ''
  }),
  actions: {
    async fetch() {
      const infos = await $fetch('https://api.nuxt.com/modules/pinia')

      this.name = infos.name
      this.description = infos.description
    }
  }
})

app.vue

<script setup lang="ts">
const website = useWebsiteStore()

await callOnce(website.fetch)
</script>

<template>
  <main>
    <h1>{{ website.name }}</h1>
    <p>{{ website.description }}</p>
  </main>
</template>

高级用法

下面这个例子，我们利用useState处理应用中默认语言的共享状态

import type { Ref } from 'vue'

export const useLocale = () => {
  return useState<string>('locale', () => useDefaultLocale().value)
}

export const useDefaultLocale = (fallback = 'en-US') => {
  const locale = ref(fallback)
  if (import.meta.server) {
    const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0]
    if (reqLocale) {
      locale.value = reqLocale
    }
  } else if (import.meta.client) {
    const navLang = navigator.language
    if (navLang) {
      locale.value = navLang
    }
  }
  return locale
}

export const useLocales = () => {
  const locale = useLocale()
  const locales = ref([
    'en-US',
    'en-GB',
    ...
    'ja-JP-u-ca-japanese'
  ])
  if (!locales.value.includes(locale.value)) {
    locales.value.unshift(locale.value)
  }
  return locales
}

export const useLocaleDate = (date: Ref<Date> | Date, locale = useLocale()) => {
  return computed(() => new Intl.DateTimeFormat(locale.value, { dateStyle: 'full' }).format(unref(date)))
}

<script setup lang="ts">
const locales = useLocales()
const locale = useLocale()
const date = useLocaleDate(new Date('2016-10-26'))
</script>

<template>
  <div>
    <h1>Nuxt birthday</h1>
    <p>{{ date }}</p>
    <label for="locale-chooser">Preview a different locale</label>
    <select id="locale-chooser" v-model="locale">
      <option v-for="locale of locales" :key="locale" :value="locale">
        {{ locale }}
      </option>
    </select>
  </div>
</template>

共享状态

通过自动导入composables函数的这个特性，我们可以创建一个类型安全的全局状态

composables/states.ts

export const useColor = () => useState<string>('color',()=>'pink')

然后我们可以直接在其它文件内，直接使用这个方法，而不用使用import关键字

<script setup lang="ts">
const color = useColor() // Same as useState('color')
</script>

<template>
  <p>Current color: {{ color }}</p>
</template>

使用第三方库

Nuxr2使用vuex来管理状态

但是在Nuxt3中，没有特别的意见。下面的状态管理库都可以

• Pinia
• Harlem
• XState