Pinia 与 服务器端渲染 Nuxt.js 框架
将 Pinia 与 Nuxt.js 一起使用更容易,因为 Nuxt 在服务器端渲染方面处理了很多事情。例如,您不需要关心序列化或 XSS 攻击。Pinia 支持 Nuxt Bridge 和 Nuxt 3。
安装@pinia/nuxt
npm install @pinia/nuxt # or with yaryarn add @pinia/nuxt
我们提供了一个模块来为您处理所有事情,您只需将其添加到nuxt.config.js文件的modules项中:
// nuxt.config.js export default defineNuxtConfig({ // ... other options modules: [ // ... '@pinia/nuxt', ], })
就是这样,像往常一样使用您的 Store!
在 setup()外使用 Store
如果你想在setup()
外面使用 Store ,记得把 Pinia 对象传给useStore()
,我们将其添加到上下文中,以便您可以在asyncData()
和fetch()
中访问它:
import { useStore } from '~/stores/myStore' export default {asyncData ({ $pinia }) { const store = useStore($pinia) }, }
自动导入
默认情况下,@pinia/nuxt公开了一个单独的自动导入:usePinia(),它类似于 nuxt 中getActivePinia()
,但效果更好。您可以添加自动导入,使您的编程更轻松:
// nuxt.config.js export default defineNuxtConfig({ // ... other options modules: [ // ... [ '@pinia/nuxt', { autoImports: [ // automatically imports `defineStore` 'defineStore', // import { defineStore } from 'pinia' // automatically imports `defineStore` as `definePiniaStore` ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia' ], }, ], ], })