• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • Pinia 与 服务器端渲染 Nuxt.js 框架

    将 Pinia 与 Nuxt.js 一起使用更容易,因为 Nuxt 在服务器端渲染方面处理了很多事情。例如,您不需要关心序列化或 XSS 攻击。Pinia 支持 Nuxt Bridge 和 Nuxt 3。

    安装@pinia/nuxt

    npm install @pinia/nuxt
    
    # or with yar
    yarn 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'
            ],
          },
        ],
      ],
    })