摘要：
Vue.js自带一些内置的状态管理机制,包括:Vuex是Vue.js生态系统中最流行的状态管理库之一。它提供一个中心化的存储区(store),用于管理应用程序的整个状态树。Vuex... Vue.js 自带一些内置的状态管理机制,包括:
Vuex 是 Vue.js 生态系统中最流行的状态管理库之一。它提供一个中心化的存储区(store),用于管理应用程序的整个状态树。Vuex 遵循单向数据流的原则,确保状态的变更可以被跟踪和预测。
Vuex 的核心概念包括:
使用 Vuex 可以让应用程序的状态管理更加结构化和可预测。它还提供时间旅行调试和热重载等高级特性。
Pinia 是一个新兴的状态管理库,旨在简化 Vuex 的使用。它提供一个更加轻量级和直观的 API,保留 Vuex 的核心功能。
Pinia 的主要特点包括:
与 Vuex 相比,Pinia 提供更简单和灵活的状态管理解决方案,可以更好地适应不同规模和复杂度的 Vue.js 应用程序。
在构建 Vue.js 应用程序时,状态管理是一个重要的考虑因素。Vue.js 提供多种内置的状态管理机制,如组件内部状态、Prop 传递和事件总线。对于更复杂的应用程序,Vuex 和 Pinia 这样的状态管理库可以提供更强大和结构化的解决方案。开发人员需要根据应用程序的复杂度和需求,选择最合适的状态管理方式。无论选择哪种方式,良好的状态管理都可以帮助确保应用程序的一致性和可维护性。
Vue新一代状态管理工具，Pinia.js上手指南
是 团队成员开发的一种新一代状态管理工具，被认为是在 Vuex 的基础上的进阶版本。 在 Vue 3.0 项目中， 被广泛推崇。 安装和创建 Store：新建一个目录 src/store，其中包含 文件。 在 中引入并使用 store。 定义 State：在 src/store 下创建 文件，用于定义状态。 也可以结合 computed 属性获取状态。 对于复杂状态，推荐使用解构，但注意解构会使其失去响应性，此时可利用 pinia 的 storeToRefs 方法。 修改 State：直接修改状态值是可行的，但通常建议通过 actions 来改变状态，以便于管理和追踪状态变化。 Getters 和 Actions：action 可以像普通函数一样使用 async/await 语法，方便处理异步操作。 action 之间可以通过 this 访问彼此。 在 action 中调用其他 store 的 action 也相对简单，只需引入对应 store 后即可访问其内部方法。 异步处理 支持异步操作，包括异步 action 和异步获取（getters）。 在处理需要等待响应的操作时，可以使用 async/await 语法。 持久化：数据持久化功能通过插件 pinia-plugin-persist 实现。 在 store 中启用此插件即可。 默认数据存储在 sessionStorage 中，可通过设置自定义键和存储位置（如 localStorage）来调整存储方式。 通过 paths 属性可以指定需要持久化的状态字段。 自定义持久化策略：默认情况下，所有状态都将被缓存。 用户可以根据需要通过 paths 参数自定义持久化字段。 这样可以避免不必要的状态持久化，节省资源。 探索更多功能 的功能远不止上述介绍，更多高级用法和特性等待开发者自行探索。 官方文档提供了丰富的参考资料和示例，帮助开发者深入理解并应用 。
Vuex4.x（一）初识vue3的状态管理-state
Vuex 是一个专为 应用程序开发的 状态管理模式 。 它采用集中存储管理应用的所有组件的状态的方式，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
两种使用方法：
官方给了两个流程图，一个简单的，我们就不看了。 还有一个复杂一点的，如下图：
应该没有翻译错吧。
组件问vuex，用户登录了没？vuex就只能问后端。 等等，不是应该在前端缓存一个登录状态吗？ 用户在登录页面完成登录后，后端会返回一个token，然后缓存在前端，以后其他地方问是否登录，直接看这个token不就可以了吗？为啥还有问后端要数据？
如果不需要的话，我就想不出来还有啥状态关系到后端API了。
所以另一个理解就是，vuex其实是支持直接从后端获取数据，然后存入state的，也就是说可以把state当作大号data来看待。
我在这个流程里面加上了一个前端存储的功能，也就是说可以把 state 存在前端，这样刷新、关掉浏览器、关机重启等情况，state 的数据都不会丢失了。 便于恢复状态。
我们先来定义一个简单的state，看看在vue3里面有什么变化。
一个简单类型（number）的count，还有一个引用类型的myObject。
我们打印出来看看效果：
未完待续。 。 。
上手 Vue 新的状态管理 Pinia，一篇文章就够了
Vuex 作为一个老牌 Vue 状态管理库，大家都很熟悉了
Pinia 是 团队成员专门为 Vue 开发的一个全新的状态管理库，并且已经被纳入官方github
为什么有 Vuex 了还要再开发一个 Pinia ？
先来一张图，看下当时对于Vuex5 的提案 ，就是下一代 Vuex5 应该是什么样子的
Pinia 就是完整的符合了他当时 Vuex5 提案所提到的功能点，所以可以说 Pinia 就是 Vuex5 也不为过，因为它的作者就是官方的开发人员，并且已经被官方接管了，只是目前 Vuex 和 Pinia 还是两个独立的仓库，以后可能会合并，也可能独立发展，只是官方肯定推荐的是 Pinia
因为在 Vue3 中使用 Vuex 的话需要使用 Vuex4，并且还只能作为一个过渡的选择，存在很大缺陷，所以在 Componsition API 诞生之后，也就设计了全新的状态管理 Pinia
Vuex ：State 、 Gettes 、 Mutations (同步)、 Actions (异步)
Pinia ：State 、 Gettes 、 Actions (同步异步都支持)
Vuex 当前最新版是4.x
Pinia 当前最新版是2.x
就目前而言 Pinia 比 Vuex 好太多了，解决了 Vuex 的很多问题，所以笔者也非常建议直接使用 Pinia，尤其是 TypeScript 的项目
以Vue3 + TypeScript为例
安装
初始化配置
在 store 目录下创建一个为例，我们先定义并导出一个名为user的模块
defineStore接收两个参数
第一个参数就是模块的名称，必须是唯一的，多个模块不能重名，Pinia 会把所有的模块都挂载到根容器上 第二个参数是一个对象，里面的选项和 Vuex 差不多
比如我们要在页面中访问 state 里的属性 count
由于defineStore会返回一个函数，所以要先调用拿到数据对象，然后就可以在模板中直接使用了
比如像注释中的解构出来使用，是完全没有问题的，只是注意了，这样拿到的数据 不是响应式 的，如果要解构还保持响应式就要用到一个方法storeToRefs() ，示例如下
原因就是 Pinia 其实是把 state 数据都做了reactive处理，和 Vue3 的 reactive 同理，解构出来的也不是响应式，所以需要再做ref响应式代理
这个和 Vuex 的 getters 一样，也有缓存功能。如下在页面中多次使用，第一次会调用 getters，数据没有改变的情况下之后会读取缓存
注意两种方法的区别，写在注释里了
更新 state 里的数据有四种方法，我们先看三种简单的更新，说明都写在注释里了
第四种方法就是当逻辑比较多或者请求的时候，我们就可以封装到示例中 store/ 里的 actions 里
可以传参数，也可以通过 可以直接获取到 state 里的数据，需要注意的是不能用箭头函数定义 actions，不然就会绑定外部的 this 了
调用
打开开发者工具的Vue Devtools就会发现 Pinia，而且可以手动修改数据调试，非常方便
示例：
我们先定义示例接口 api/
然后在 store/ 里的 actions 封装调用接口
页面中调用 actions 发起请求
在一个模块的 actions 里需要修改另一个模块的 state 数据
示例：比如在 chat 模块里修改 user 模块里某个用户的名称
user 模块里
如果本文对你有一点点帮助，点个赞支持一下吧，你的每一个【赞】都是我创作的最大动力，感谢支持_