Question

将 Pinia 与 Nuxt.js 一起使用更容易，因为 Nuxt 在_服务器端渲染_方面处理了很多事情。 例如，您不需要关心序列化或 XSS 攻击。 Pinia 支持 Nuxt Bridge 和 Nuxt 3，对于裸 Nuxt 2 的支持， 见下文 。

安装方式

bash

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

我们提供了一个 module 来为您处理所有事情，您只需将它添加到您的 nuxt.config.js 文件中的 modules 中：

js

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

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

在 setup() 之外使用 Store

如果你想在 setup() 之外使用 store，记得将 pinia 对象传递给 useStore() 。 我们将它添加到 上下文 ，因此您可以在 asyncData() 和 fetch() 中访问它：

js

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

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

自动导入

默认情况下， @pinia/nuxt 公开了一个自动导入： usePinia() ，它类似于 getActivePinia() ，但与 Nuxt 一起使用效果更好。 您可以添加自动导入以使您的生活更轻松：

js

// nuxt.config.js
export default defineNuxtConfig({
  // ... other options
  modules: [
    // ...
    [
      '@pinia/nuxt',
      {
        autoImports: [
          // automatically imports `defineStore`
          'defineStore', // import { defineStore } from 'pinia'
          // automatically imports `defineStore` as `definePiniaStore`
          ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
        ],
      },
    ],
  ],
})

Nuxt 2 without bridge

Pinia 支持 Nuxt 2，直到 @pinia/nuxt v0.2.1。 确保在 pinia 旁边安装 @nuxtjs/composition-api ：

bash

yarn add pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api
# or with npm
npm install pinia @pinia/nuxt@0.2.1 @nuxtjs/composition-api

我们提供一个 module 来为您处理一切，您只需将其添加到您的 nuxt.config.js 文件中的 buildModules 中：

js

// 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

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

json

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

这也将确保您具有自动完成功能。

将 Pinia 与 Vuex 一起使用

建议避免同时使用 Pinia 和 Vuex 但是如果你需要同时使用这两个，你需要告诉 pinia 不要禁用它：

js

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