本文主要是介绍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)
}
这篇关于Vue3 之 Pinia 服务端渲染 (SSR) （九）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
