Pinia 中文手册

Appearance

Return to top
目录导航

Nuxt.js

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

安装方式

bash
yarn add @pinia/nuxt
# or with npm
npm install @pinia/nuxt
1
2
3

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

js
// nuxt.config.js
export default defineNuxtConfig({
  // ... other options
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})
1
2
3
4
5
6
7
8

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

在 setup() 之外使用Store

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

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

export default {
  asyncData({ $pinia }) {
    const store = useStore($pinia)
  },
}
1
2
3
4
5
6
7

自动导入

默认情况下，@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'
        ],
      },
    ],
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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
1
2
3

我们提供一个 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',
  ],
}
1
2
3
4
5
6
7
8
9
10

TypeScript

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

json
{
  "types": [
    // ...
    "@pinia/nuxt"
  ]
}
1
2
3
4
5
6

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

将 Pinia 与 Vuex 一起使用

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

js
// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/composition-api/module',
    ['@pinia/nuxt', { disableVuex: false }],
  ],
  // ... other options
}
1
2
3
4
5
6
7
8