Nuxt.js

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

安装

请确保pinia和@nuxtjs/composition-api一起安装：

  1. yarn add pinia @pinia/nuxt @nuxtjs/composition-api
  2. # or with npm
  3. npm install pinia @pinia/nuxt @nuxtjs/composition-api

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

  1. // nuxt.config.js
  2. export default {
  3.   // ... other options
  4.   buildModules: [
  5.     // Nuxt 2 only:
  6.     // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
  7.     '@nuxtjs/composition-api/module',
  8.     '@pinia/nuxt',
  9.   ],
  10. }

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

不在 setup() 中使用 store

如果您不想在setup()中使用store，请记住将pinia对象传递给useStore()。我们将它添加到上下文中，这样你就可以在asyncData()和fetch()中访问它:

  1. import { useStore } from '~/stores/myStore'
  3. export default {
  4.   asyncData({ $pinia }) {
  5.     const store = useStore($pinia)
  6.   },
  7. }

在 stores 中使用 Nuxt 上下文

通过使用注入的$nuxt属性，你也可以在任何store中使用上下文：

  1. import { useUserStore } from '~/stores/userStore'
  3. defineStore('cart', {
  4.   actions: {
  5.     purchase() {
  6.       const user = useUserStore()
  7.       if (!user.isAuthenticated()) {
  8.         this.$nuxt.redirect('/login')
  9.       }
  10.     },
  11.   },
  12. })

将 Pinia 与 Vuex 一起使用

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

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

TypeScript

如果您使用的是TypeScript或jsconfig.json，您还应该添加context.pinia的类型:

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

这也将确保您具有自动补全功能😉。