跳到主要内容

认识

2024年03月18日
柏拉文
越努力，越幸运

一、认识​

Pinia 是 Vue.js 的轻量级状态管理库, 它允许你跨组件或页面共享状态。Pinia Store 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

二、问题​

2.1 Pinia Vs Vuex​

Vuex

Pinia 起源于一次探索 Vuex 下一个迭代的实验，因此结合了 Vuex 5 核心团队讨论中的许多想法。与 Vuex 5.x 之前 相比，Pinia 不仅提供了一个更简单的 API，Pinia 是一个围绕 Vue3 Composition API 的封装器, 提供了符合组合式 API 风格的 API。最重要的是,搭配 TypeScript 一起使用时有非常可靠的类型推断支持。对比 Vuex 3.x/4.x:

  1. 支持多个Store, 而 Vuex 只能有一个store、mutation和action

  2. store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见

  3. mutation 已被弃用。它们经常被认为是极其冗余的。它们初衷是带来 devtools 的集成方案，但这已不再是一个问题了。在pinia中没有mutations，只有actions，不管是同步还是异步的代码，都可以在actions中完成。

  4. 无需要创建自定义的复杂包装器来支持 TypeScript，一切都可标注类型，API 的设计方式是尽可能地利用 TS 类型推理。

  5. 无过多的魔法字符串注入，只需要导入函数并调用它们，然后享受自动补全的乐趣就好。

  6. 无需要动态添加 Store，它们默认都是动态的，甚至你可能都不会注意到这点。注意，你仍然可以在任何时候手动使用一个 Store 来注册它，但因为它是自动的，所以你不需要担心它。

  7. 不再有嵌套结构的模块。你仍然可以通过导入和使用另一个 Store 来隐含地嵌套 stores 空间。虽然 Pinia 从设计上提供的是一个扁平的结构，但仍然能够在 Store 之间进行交叉组合。你甚至可以让 Stores 有循环依赖关系。

  8. 不再有可命名的模块。考虑到 Store 的扁平架构，Store 的命名取决于它们的定义方式，你甚至可以说所有 Store 都应该命名。

2.2 Pinia Vs export const state = reactive({})​

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

export const state = reactive({}): 对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。