是否需要 Pinia?

Pinia 做为 Vuex 的接班人，已经是 vue3 官方指定的状态管理库。

前言

在 vue3 项目中使用 pinia 作为状态管理库应该是水到渠成的事情，但结合 vue3 的组合式 API，部分开发者认为不一定需要 Pinia，他们借助 reactive 等 API，就能在项目中做出一个自己的状态管理工具。

import { reactive } from 'vue'

class MyModule {
  private notifies: any[] = []

  clearNotifies() {
    this.notifies = []
  }
}

export const myModule: MyModule = reactive(new MyModule())

1
2
3
4
5
6
7
8
9
10
11

用 reactive 包装后，就变成了一个响应式数据。

这样，我们还需要使用 Pinia 吗？

安全漏洞

对此，Pinia 官方文档是这么描述的：

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。

而这里的安全漏洞，指的是：

在 SSR 环境下，应用模块通常只在服务器启动时初始化一次。同一个应用模块会在多个服务器请求之间被复用，而我们的单例状态对象也一样。如果我们用单个用户特定的数据对共享的单例状态进行修改，那么这个状态可能会意外地泄露给另一个用户的请求。我们把这种情况称为跨请求状态污染。

也就是当你使用服务端渲染开发应用的时候，有可能会造成 A 用户的数据传递给了 B 用户这种情况。

而 Pinia 在服务端请求中会重新 create，解决了跨请求状态污染问题。

export function createApp() {
  const app = createSSRApp(App)
  const pinia = createPinia()

  app.use(pinia)
  return { app }
}

1
2
3
4
5
6
7

更好的开发支持

当你的项目变得庞大的时候，状态管理这个事情将会变得复杂，数据的流动也会变得错综复杂。而使用 Pinia 的话，就可以获得官方支持，方便调试：

Devtools 支持
- 追踪 actions、mutations 的时间线
- 在组件中展示它们所用到的 Store
- 让调试更容易的 Time travel
热更新
- 不必重载页面即可修改 Store
- 开发时可保持当前的 State
插件：可通过插件扩展 Pinia 功能
为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
支持服务端渲染

vue3 项目开发到底需不需要 Pinia，你应该有了自己的想法了。

是否需要 Pinia? #

前言 #

安全漏洞 #

更好的开发支持 #

是否需要 Pinia?

前言

安全漏洞

更好的开发支持