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 文件的 buildModules 中添加它。

// nuxt.config.js
export default {
  // ... 其他配置
  buildModules: [
    // 只支持 Nuxt 2：
    // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
    '@nuxtjs/composition-api/module',
    '@pinia/nuxt',
  ],
}

配置完成了，像往常一样使用 store 吧!

在 setup() 外部使用 store

如果你想在 setup() 外部使用一个 store，记得把 pinia 对象传给 useStore()。我们会把它添加到上下文中，所以你可以在 asyncData() 和 fetch() 中访问它。

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

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

在 store 中使用 Nuxt 上下文

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

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 }],
  ],
  // ... 其他配置
}

TypeScript

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

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

这也将确保你可以使用自动补全😉。