Pinia 与 服务器端渲染 Nuxt.js 框架

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

安装@pinia/nuxt

npm install @pinia/nuxt

# or with yar
yarn add @pinia/nuxt

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

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

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

在 setup()外使用 Store

如果你想在setup()外面使用 Store ，记得把 Pinia 对象传给useStore()，我们将其添加到上下文中，以便您可以在asyncData()和fetch()中访问它：

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

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

自动导入

默认情况下，@pinia/nuxt公开了一个单独的自动导入：usePinia()，它类似于 nuxt 中getActivePinia()，但效果更好。您可以添加自动导入，使您的编程更轻松：

// 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'
        ],
      },
    ],
  ],
})