Vue3 之 Pinia 服务端渲染 (SSR) （九）

Pinia SSR概述

Pinia是一个用于Vue.js的状态管理库，它支持服务端渲染(SSR)。在SSR中，页面在服务器端渲染成HTML字符串，然后发送到客户端，从而提升首屏加载速度和SEO优化。Pinia通过其设计使得在SSR环境下也能轻松使用和管理状态。

Pinia SSR特点

开箱即用：只要你在setup函数、getter和action的顶部调用useStore()函数，Pinia对于SSR就是开箱即用的。
数据预取：Pinia可以在服务器端预取数据，并保存在状态中，从而避免在客户端再次发起相同的请求。
安全性：在SSR中，需要确保根状态（rootState）被包含在HTML中的某个地方，并且应该被转义以保证安全性。

1. 创建Pinia Store
// store/main.js  
import { defineStore } from 'pinia'  export const useMainStore = defineStore('main', {  state: () => ({  // 初始状态  message: 'Hello from SSR!'  }),  // getters, actions...  
})
2. 在服务器端使用Pinia假设你正在使用Node.js和Koa框架进行服务端渲染，你可以在中间件或路由处理函数中使用Pinia。// server.js  
const Koa = require('koa')  
const { createSSRApp, h } from 'vue'  
const { createPinia } = require('pinia')  
const { createRenderer } = require('vue-server-renderer')  const app = new Koa()  
const pinia = createPinia()  
const ssrApp = createSSRApp({ /* ... */ })  
ssrApp.use(pinia)  const renderer = createRenderer()  app.use(async ctx => {  const mainStore = pinia.use(useMainStore)  // 在这里，你可以根据mainStore中的状态来生成HTML  const appContent = await renderer.renderToString(ssrApp)  ctx.body = `  <!DOCTYPE html>  <html lang="en">  <head>  <!-- ... -->  </head>  <body>  <div id="app">${appContent}</div>  <!-- 将Pinia状态嵌入到HTML中以供客户端使用（可选） -->  <script>window.__INITIAL_STATE__ = ${JSON.stringify(mainStore.state)}</script>  </body>  </html>  `  
})  app.listen(3000)3. 在客户端使用Pinia
并在客户端通过 window.__pinia 全局访问它，我们可以这样写：
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)// 必须由用户设置
if (isClient) {pinia.state.value = JSON.parse(window.__pinia)
}