Nuxt.js

通过 Pinia 作者的官方视频课程掌握这些内容以及更多内容

使用 Pinia 与 Nuxt 更容易，因为 Nuxt 在处理服务器端渲染方面做了很多工作。例如，您无需关心序列化或 XSS 攻击。Pinia 支持 Nuxt Bridge 和 Nuxt 3。对于裸 Nuxt 2 支持，请参见下方。

安装

yarn add pinia @pinia/nuxt
# or with npm
npm install pinia @pinia/nuxt

提示

如果您使用的是 npm，您可能会遇到ERESOLVE 无法解析依赖项树错误。在这种情况下，请将以下内容添加到您的package.json中

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

我们提供一个模块来为您处理所有事情，您只需要将其添加到nuxt.config.js文件中的modules中

// nuxt.config.js
export default defineNuxtConfig({
  // ... other options
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

就是这样，像往常一样使用您的 Store！

在页面中等待 Action

与onServerPrefetch()一样，您可以在asyncData()中调用 Store Action。鉴于useAsyncData()的工作原理，请确保返回一个值。这将允许 Nuxt 跳过在客户端运行 Action 并重用来自服务器的值。

<script setup>
const store = useStore()
// we could also extract the data, but it's already present in the store
await useAsyncData('user', () => store.fetchUser())
</script>

如果您的 Action 没有解析值，您可以添加任何非空值

<script setup>
const store = useStore()
await useAsyncData('user', () => store.fetchUser().then(() => true))
</script>

提示

如果您想在setup()之外使用 Store，请记住将pinia对象传递给useStore()。我们将其添加到上下文中，以便您可以在asyncData()和fetch()中访问它

import { useStore } from '~/stores/myStore'

export default {
  asyncData({ $pinia }) {
    const store = useStore($pinia)
  },
}

自动导入

默认情况下，@pinia/nuxt 公开了一些自动导入

• usePinia()，它类似于getActivePinia()，但与 Nuxt 的配合更好。您可以添加自动导入以简化您的工作
• defineStore() 用于定义 Store
• storeToRefs() 当您需要从 Store 中提取单个 ref 时
• acceptHMRUpdate() 用于热模块替换

它还会自动导入您stores文件夹中定义的所有 Store。但是，它不会查找嵌套的 Store。您可以通过设置storesDirs选项来自定义此行为

// nuxt.config.ts
export default defineNuxtConfig({
  // ... other options
  modules: ['@pinia/nuxt'],
  pinia: {
    storesDirs: ['./stores/**', './custom-folder/stores/**'],
  },
})

请注意，文件夹相对于项目的根目录。如果您更改了srcDir选项，则需要相应地调整路径。

没有桥接的 Nuxt 2

Pinia 支持 Nuxt 2，直到@pinia/nuxt v0.2.1。请确保还安装@nuxtjs/composition-api以及pinia

yarn add pinia @pinia/[email protected] @nuxtjs/composition-api
# or with npm
npm install pinia @pinia/[email protected] @nuxtjs/composition-api

我们提供一个模块来为您处理所有事情，您只需要将其添加到nuxt.config.js文件中的buildModules中

// nuxt.config.js
export default {
  // ... other options
  buildModules: [
    // Nuxt 2 only:
    // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
    '@nuxtjs/composition-api/module',
    '@pinia/nuxt',
  ],
}

TypeScript

如果您使用的是 Nuxt 2 (@pinia/nuxt < 0.3.0) 以及 TypeScript 或拥有jsconfig.json，您还应该添加context.pinia的类型

{
  "types": [
    // ...
    "@pinia/nuxt"
  ]
}

这将确保您拥有自动完成功能😉。

将 Pinia 与 Vuex 一起使用

建议避免同时使用 Pinia 和 Vuex，但如果您需要同时使用两者，则需要告诉 pinia 不要禁用它

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/composition-api/module',
    ['@pinia/nuxt', { disableVuex: false }],
  ],
  // ... other options
}