Nuxt.js

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

安装

请确保pinia和@nuxtjs/composition-api (opens new window)一起安装：

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

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

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

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

不在 setup() 中使用 store

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

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

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

在 stores 中使用 Nuxt 上下文

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

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"
  ]
}

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