全局状态共享

useState()

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

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

// init 为状态提供初始值的函数
// key 为状态的唯一标识

• 在composables的文件以camelCase命名的文件

// composables/useCount.ts
export default function () {
  return useState('count', () => 0)
}
export default useCount = () => {
  return useState('count', () => 0)
}

// index.vue
const count = useCount()
const addCount = () => {
  count.value++
}

pinia

安装

yarn add pinia @pinia/nuxt
# 或者使用 npm
npm install pinia @pinia/nuxt

TIP

如果你正在使用 npm，你可能会遇到 ERESOLVE unable to resolve dependency tree 错误。如果那样的话，将以下内容添加到 package.json 中：

"overrides": {
  "vue": "latest"
}

nuxt.config.ts

export default defineNuxtConfig({
  // ... 其他配置
  modules: [
    // ...
    '@pinia/nuxt'
  ]
})