Pinia 中文文档

Nuxt.js

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

安装

确保在 pinia 旁边安装 @nuxtjs/composition-api：

yarn add pinia @pinia/nuxt @nuxtjs/composition-api
# 或使用 npm
npm install pinia @pinia/nuxt @nuxtjs/composition-api

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

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

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

在 setup() 之外使用存储

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

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

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

在商店中使用 Nuxt 上下文

您还可以使用注入的属性 $nuxt 在任何商店中使用 上下文：

import { useUserStore } from '~/stores/userStore'

defineStore('cart', {
  actions: {
    purchase() {
      const user = useUserStore()
      if (!user.isAuthenticated()) {
        this.$nuxt.redirect('/login')
      }
    },
  },
})

将 Pinia 与 Vuex 一起使用

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

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

TypeScript

如果你使用 TypeScript 或有 jsconfig.json，你还应该为 context.pinia 添加类型：

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

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