Pinia 與 Nuxt.js

搭配 Nuxt 的 Pinia 更易用，因?yàn)?Nuxt 處理了很多與服務(wù)器端渲染有關(guān)的事情。例如，你不需要關(guān)心序列化或 XSS 攻擊。Pinia 既支持 Nuxt Bridge 和 Nuxt 3，也支持純 Nuxt 2，見下文。

安裝

yarn add pinia @pinia/nuxt
## 或者使用 npm
npm install pinia @pinia/nuxt

:::tip 如果你正在使用 npm，你可能會(huì)遇到 ERESOLVE unable to resolve dependency tree 錯(cuò)誤。如果那樣的話，將以下內(nèi)容添加到 package.json 中：

"overrides": { 
  "vue": "latest"
}

:::

我們提供了一個(gè) module 來為你處理一切，你只需要在 nuxt.config.js 文件的 modules 中添加它。

// nuxt.config.js
export default defineNuxtConfig({
  // ... 其他配置
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

這樣配置就完成了，正常使用 store 就好啦!

在 setup() 外部使用

如果你想在 setup() 外部使用一個(gè) store，記得把 pinia 對象傳給 useStore()。我們會(huì)把它添加到上下文中，然后你就可以在 asyncData() 和 fetch() 中訪問它了：

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


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

與 onServerPrefetch() 一樣，如果你想在 asyncData() 中調(diào)用一個(gè)存儲(chǔ)動(dòng)作，你不需要做任何特別的事情。

<script setup>
const store = useStore()
const { data } = await useAsyncData('user', () => store.fetchUser())
</script>

自動(dòng)引入

默認(rèn)情況下，@pinia/nuxt 會(huì)暴露一個(gè)自動(dòng)引入的方法：usePinia()，它類似于 getActivePinia()，但在 Nuxt 中效果更好。你可以添加自動(dòng)引入來減輕你的開發(fā)工作：

// nuxt.config.js
export default defineNuxtConfig({
  // ... 其他配置
  modules: [
    // ...
    [
      '@pinia/nuxt',
      {
        autoImports: [
          // 自動(dòng)引入 `defineStore()`
          'defineStore',
          // 自動(dòng)引入 `defineStore()` 并重命名為 `definePiniaStore()`
          ['defineStore', 'definePiniaStore'],
        ],
      },
    ],
  ],
})

純 Nuxt 2

@pinia/nuxt v0.2.1 之前的版本中，Pinia 都支持 Nuxt 2。請確保在安裝 pinia 的同時(shí)也安裝 @nuxtjs/composition-api：

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

我們提供了一個(gè) 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',
  ],
}

TypeScript

如果你使用的是 Nuxt 2 (@pinia/nuxt < 0.3.0) 搭配 TypeScript，并且有 jsconfig.json，你應(yīng)該為 context.pinia 引入類型：

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

這也將確保你可以使用自動(dòng)補(bǔ)全????。

Pinia 搭配 Vuex 使用

建議避免同時(shí)使用 Pinia 和 Vuex，但如果你確實(shí)需要同時(shí)使用，你需要告訴 Pinia 不要禁用它：

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