发布于 由admin

Vue 3源码极客之：`Vue`的`Pinia`：如何使用`Pinia`进行`SSR`状态管理。

大家好，我是你们的老朋友，今天咱们聊聊Vue 3 SSR 里 Pinia 的那些事儿。都说 SSR 水深，状态管理更是重中之重，Pinia 作为 Vue 的官方推荐状态管理库，在 SSR 里到底怎么玩？咱们今天就来扒个精光！

开场白：SSR 状态管理，痛点在哪里？

首先，得说说为啥 SSR 状态管理这么重要。想象一下，你的网页在服务器上渲染好，带着数据直接跑到浏览器，用户打开一看，“哇，速度真快！”。但是，如果数据不对，或者状态不对，那就尴尬了。

传统的 CSR (Client-Side Rendering) 应用，所有状态都在浏览器里维护，刷新一下页面，状态就没了。但在 SSR 里，状态需要在服务器和浏览器之间传递，而且要保持一致，这可不是件容易的事。

痛点主要集中在以下几点：

  • 状态序列化与反序列化： 服务器端的状态需要序列化成字符串，传递到客户端，客户端再反序列化成 JavaScript 对象。
  • 状态同步： 服务器端渲染完成后的状态，要和客户端的状态同步，避免出现数据不一致。
  • 防止数据污染： 在 SSR 环境下，所有请求都共享同一个 Node.js 进程，如果状态管理不当，很容易出现数据污染，导致不同用户看到的数据混淆。

Pinia：救星降临？

Pinia 的出现，简化了 Vue 3 的状态管理。它基于 Composition API，类型安全，使用简单，而且官方支持 Vue 3 SSR。那么，Pinia 是如何解决 SSR 状态管理的痛点呢？

Pinia 在 SSR 中的核心思路

Pinia 在 SSR 中的核心思路是：

  1. 在服务器端创建 Pinia 实例。
  2. 在服务器端填充 Pinia 实例中的状态。
  3. 将 Pinia 实例的状态序列化成字符串，注入到 HTML 中。
  4. 在客户端创建 Pinia 实例，并从 HTML 中读取状态，进行初始化。

代码说话：手把手教你用 Pinia 实现 SSR 状态管理

光说不练假把式，咱们直接上代码，一步一步演示如何用 Pinia 实现 SSR 状态管理。

1. 创建一个简单的 Pinia Store

咱们先创建一个简单的 Pinia Store，用来存储一个计数器。

// store/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
  },
})

这个 Store 包含一个 count 状态和一个 increment 和 decrement action。

2. 服务器端渲染 (SSR) 代码

接下来，咱们编写服务器端渲染的代码。这里使用 vue/server-renderer 进行渲染。

// server.js
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
import { createPinia, setActivePinia } from 'pinia'
import App from './App.vue' // 你的 Vue 应用组件
import { useCounterStore } from './store/counter'

import express from 'express';

const app = express();

app.get('*', async (req, res) => {
  // 1. 创建 Pinia 实例
  const pinia = createPinia()

  // 2. 设置当前 Pinia 实例为激活状态 (必须在创建 Vue 应用实例之前)
  setActivePinia(pinia)

  // 3. 创建 Vue 应用实例
  const app = createSSRApp(App)
  app.use(pinia)

  // 4. 获取 Store 实例
  const counterStore = useCounterStore()

  // 5. 在服务器端修改状态 (可选)
  counterStore.increment() // 先加一次

  // 6. 渲染应用
  const appHtml = await renderToString(app)

  // 7. 获取 Pinia 状态
  const piniaState = pinia.state.value

  // 8. 将 Pinia 状态序列化成字符串，注入到 HTML 中
  const stateScript = `<script>window.__PINIA_STATE__ = ${JSON.stringify(piniaState)}</script>`

  // 9. 拼接 HTML
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>Vue 3 SSR with Pinia</title>
      </head>
      <body>
        <div id="app">${appHtml}</div>
        ${stateScript}
        <script src="/client.js"></script>
      </body>
    </html>
  `

  res.send(html)
})

app.use(express.static('.')) // Serve static files
app.listen(3000, () => {
  console.log('Server is listening on port 3000')
})

代码解释：

  • 第 1 步： 创建一个 Pinia 实例。
  • 第 2 步： 使用 setActivePinia(pinia) 将当前 Pinia 实例设置为激活状态。非常重要！ 必须在创建 Vue 应用实例之前调用，否则 Store 将无法正确初始化。
  • 第 3 步： 创建 Vue 应用实例，并使用 app.use(pinia) 安装 Pinia 插件。
  • 第 4 步： 获取 Store 实例，这里获取的是 counterStore。
  • 第 5 步： 在服务器端修改状态，这里将 count 加 1。这是可选的，你可以根据需要在服务器端初始化状态。
  • 第 6 步： 使用 renderToString(app) 渲染应用，生成 HTML 字符串。
  • 第 7 步： 使用 pinia.state.value 获取 Pinia 状态。
  • 第 8 步： 将 Pinia 状态序列化成 JSON 字符串，并嵌入到 HTML 中。这里使用 window.__PINIA_STATE__ 作为全局变量来存储状态。
  • 第 9 步： 将 HTML 字符串、Pinia 状态字符串和客户端 JavaScript 代码拼接成完整的 HTML 页面。

3. 客户端代码

接下来，咱们编写客户端代码，负责从 HTML 中读取状态，并初始化 Pinia 实例。

// client.js
import { createApp } from 'vue'
import { createPinia, setActivePinia } from 'pinia'
import App from './App.vue' // 你的 Vue 应用组件

// 1. 创建 Pinia 实例
const pinia = createPinia()

// 2. 如果有服务端渲染的状态，则进行初始化
if (window.__PINIA_STATE__) {
  pinia.state.value = JSON.parse(window.__PINIA_STATE__)
}

// 3. 设置当前 Pinia 实例为激活状态
setActivePinia(pinia)

// 4. 创建 Vue 应用实例
const app = createApp(App)
app.use(pinia)

// 5. 挂载应用
app.mount('#app')

代码解释：

  • 第 1 步： 创建一个 Pinia 实例。
  • 第 2 步： 检查 window.__PINIA_STATE__ 是否存在，如果存在，则从 HTML 中读取状态，并使用 pinia.state.value = JSON.parse(window.__PINIA_STATE__) 进行初始化。
  • 第 3 步： 使用 setActivePinia(pinia) 将当前 Pinia 实例设置为激活状态。
  • 第 4 步： 创建 Vue 应用实例，并使用 app.use(pinia) 安装 Pinia 插件。
  • 第 5 步： 挂载应用到 DOM 元素上。

4. Vue 应用组件 (App.vue)

最后，咱们编写 Vue 应用组件，用来显示和修改计数器的值。

// App.vue
<template>
  <h1>Counter: {{ counterStore.count }}</h1>
  <button @click="counterStore.increment()">Increment</button>
  <button @click="counterStore.decrement()">Decrement</button>
</template>

<script>
import { useCounterStore } from './store/counter'

export default {
  setup() {
    const counterStore = useCounterStore()
    return { counterStore }
  }
}
</script>

这个组件显示了 counterStore 中的 count 值，并提供了两个按钮来增加和减少 count 的值。

5. 运行和测试

确保你已经安装了所有的依赖：

npm install vue vue-server-renderer pinia express

然后运行服务器：

node server.js

打开浏览器，访问 http://localhost:3000，你应该能看到一个计数器，它的初始值是 1 (因为我们在服务器端加了 1)。点击 "Increment" 和 "Decrement" 按钮，你可以增加和减少计数器的值。

Pinia SSR 的进阶技巧

掌握了基本用法之后，咱们再来看看 Pinia SSR 的一些进阶技巧。

1. 使用 pinia.hydrate() 代替 pinia.state.value = JSON.parse(...)

Pinia 提供了 pinia.hydrate() 方法，可以更安全、更高效地初始化状态。它会检查状态的类型，并进行必要的转换。

// client.js
import { createPinia, setActivePinia } from 'pinia'
import App from './App.vue' // 你的 Vue 应用组件

// 1. 创建 Pinia 实例
const pinia = createPinia()

// 2. 如果有服务端渲染的状态，则进行初始化
if (window.__PINIA_STATE__) {
  pinia.state.value = JSON.parse(window.__PINIA_STATE__)
  pinia.hydrate(pinia.state.value) // 使用 hydrate 方法
}

// 3. 设置当前 Pinia 实例为激活状态
setActivePinia(pinia)

// 4. 创建 Vue 应用实例
const app = createApp(App)
app.use(pinia)

// 5. 挂载应用
app.mount('#app')

2. 使用 provide/inject 传递 Pinia 实例

虽然 setActivePinia() 可以全局设置 Pinia 实例，但在某些情况下，你可能需要更灵活的方式来传递 Pinia 实例。可以使用 Vue 3 的 provide/inject 特性。

// server.js
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
import { createPinia } from 'pinia'
import App from './App.vue' // 你的 Vue 应用组件

import express from 'express';

const app = express();

app.get('*', async (req, res) => {
  // 1. 创建 Pinia 实例
  const pinia = createPinia()

  // 2. 创建 Vue 应用实例
  const app = createSSRApp(App)
  app.use(pinia)
  app.provide('pinia', pinia) // 提供 Pinia 实例

  // ... (其他代码)
})
// App.vue
<template>
  <h1>Counter: {{ counterStore.count }}</h1>
  <button @click="counterStore.increment()">Increment</button>
  <button @click="counterStore.decrement()">Decrement</button>
</template>

<script>
import { useCounterStore } from './store/counter'
import { inject } from 'vue'

export default {
  setup() {
    const counterStore = useCounterStore()
    const pinia = inject('pinia') // 注入 Pinia 实例
    console.log('Pinia instance:', pinia) // 可以在组件中访问 Pinia 实例
    return { counterStore }
  }
}
</script>

3. 处理异步状态

在 SSR 中，经常需要处理异步状态，例如从 API 获取数据。Pinia 提供了 $onAction() 方法，可以监听 action 的执行，并在 action 完成后更新状态。

// store/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    loading: false,
  }),
  actions: {
    async fetchCount() {
      this.loading = true
      try {
        // 模拟 API 请求
        const response = await new Promise((resolve) => {
          setTimeout(() => {
            resolve({ data: 10 })
          }, 1000)
        })
        this.count = response.data
      } finally {
        this.loading = false
      }
    },
  },
})

在服务器端，你需要等待 fetchCount() action 完成后，再渲染应用。

// server.js
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'
import { createPinia, setActivePinia } from 'pinia'
import App from './App.vue' // 你的 Vue 应用组件
import { useCounterStore } from './store/counter'

import express from 'express';

const app = express();

app.get('*', async (req, res) => {
  // 1. 创建 Pinia 实例
  const pinia = createPinia()

  // 2. 设置当前 Pinia 实例为激活状态 (必须在创建 Vue 应用实例之前)
  setActivePinia(pinia)

  // 3. 创建 Vue 应用实例
  const app = createSSRApp(App)
  app.use(pinia)

  // 4. 获取 Store 实例
  const counterStore = useCounterStore()

  // 5. 在服务器端获取数据
  await counterStore.fetchCount() // 等待数据加载完成

  // 6. 渲染应用
  const appHtml = await renderToString(app)

  // 7. 获取 Pinia 状态
  const piniaState = pinia.state.value

  // 8. 将 Pinia 状态序列化成字符串，注入到 HTML 中
  const stateScript = `<script>window.__PINIA_STATE__ = ${JSON.stringify(piniaState)}</script>`

  // 9. 拼接 HTML
  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>Vue 3 SSR with Pinia</title>
      </head>
      <body>
        <div id="app">${appHtml}</div>
        ${stateScript}
        <script src="/client.js"></script>
      </body>
    </html>
  `

  res.send(html)
})

app.use(express.static('.')) // Serve static files
app.listen(3000, () => {
  console.log('Server is listening on port 3000')
})

4. 防止数据污染

在 SSR 环境下，所有请求都共享同一个 Node.js 进程，如果状态管理不当，很容易出现数据污染。为了防止数据污染，需要确保每个请求都使用独立的 Pinia 实例。

咱们之前已经通过在每个请求处理函数中创建新的 Pinia 实例来解决了这个问题。 记住，不要在全局作用域中创建 Pinia 实例！

总结：Pinia + SSR = 效率 + 稳定

Pinia 在 Vue 3 SSR 中扮演着非常重要的角色。它简化了状态管理，提高了开发效率，并保证了状态的一致性。 通过本文的学习，你应该已经掌握了 Pinia 在 SSR 中的基本用法和进阶技巧。 记住，setActivePinia() 是关键，确保在创建 Vue 应用实例之前调用。

彩蛋：一些常见问题

  • Q: 为什么我的 Pinia 状态在客户端没有正确初始化？

    • A: 检查你是否在客户端正确读取了 window.__PINIA_STATE__，并使用 pinia.hydrate() 或 pinia.state.value = JSON.parse(...) 进行了初始化。
    • 确保在创建 Vue 应用实例之前，使用 setActivePinia(pinia) 设置了当前 Pinia 实例为激活状态。

  • Q: 如何在 SSR 中处理多个 Store？

    • A: Pinia 可以管理多个 Store，你只需要在服务器端和客户端分别创建这些 Store 的实例，并按照本文介绍的步骤进行初始化即可。

  • Q: 我可以使用 Vuex 代替 Pinia 吗？

    • A: 可以，Vuex 也可以在 SSR 中使用。但是，Pinia 更轻量级，API 更简洁，而且官方支持 Vue 3 SSR，所以更推荐使用 Pinia。

希望今天的讲座对你有所帮助。 如果你还有其他问题，欢迎随时提问！ 下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注