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)
}