对 Vuex 的理解

结论先行

Vuex 是一个专门为 Vue.js 设计的集中式状态管理库，核心是用于中大型应用中组件间的通信和数据的共享。它有四大将，分别是 state、mutations、actions、getters。

state 用于存放的数据状态；mutations 用于修改 state 中的状态；

actions 可以理解为异步方式操作数据；

getters：类似Vue的计算属性，主要是对 state 中的数据进行计算或者过滤。

 底层原理： 

对于 Vuex3 核心就是通过new Vue() 创建了一个 Vue实例，进行数据共享；

对于 Vuex4 核心就是通过 reactive() 创建一个响应式对象，进行数据共享。

 

 

1、概念

Vuex 是一个专门为 Vue.js 设计的状态管理库。它的核心思想是集中式存储和管理应用的所有组件状态。

以单一的状态树的形式存储，然后通过定义一系列的 mutations、actions、getters 来操作这个状态树，从而实现组件间的通信和数据共享。

主要应用于中大型复杂应用中组件间状态共享和数据流管理的问题。 

 

2、核心概念

Vuex 的核心概念包括: state、mutations、actions 和 getters。

state 是应用的状态；

mutations 用于修改 state 中的状态；

actions 则用于处理异步操作或批量的同步操作，最终通过 mutations 来改变 state；

getters 则用于对 state 中的数据进行计算或过滤。

 

3、 状态修改

① 组件中 commit() => mutations => 修改状态 state；

② 组件中 dispatch() => actions(为了解决接口的复用问题，封装公共的逻辑) => commit() => mutation => 修改状态 state

4、其它特点

① 单向数据流 

在 Vuex 中，数据流的流向是单向的，即从状态树（state）到视图（view），再到提交操作（commit）触发的状态变更，最后更新状态树。

这种单向数据流的机制使得数据的流动更加清晰，同时也更容易进行调试和维护。

② 提供了辅助函数 

而 Vuex 还提供了一些辅助函数，比如 mapState、 mapGetters、mapActions 和 mapMutations 等，用于简化组件中对状态的读取和操作。

 

5、缺点

① Vuex store 只有一份，复杂的数据需要依赖于模块。

Vuex 状态是一个树状结构，最终会将模块的状态挂载到根模块上；

② 模块和状态的名字可能存在冲突；

③ 数据不够扁平化、调用的时候过长；

④ 更改状态 mutation 和 action 的选取；

⑤ 模块需要增加namespaced；

⑥ 对TS支持并不友好等……

在 pinia 中已经解决了上面的问题。

6、底层原理

对于 Vuex3 核心就是通过new Vue() 创建了一个 Vue实例，进行数据共享；

对于 Vuex4 核心就是通过 reactive() 创建一个响应式对象，进行数据共享。

7、Redux、Vuex、Pinia 分别有什么区别？

Redux、Vuex 和 Pinia 都是用于状态管理的流行框架，它们的主要区别如下：

① Redux

• Redux 是一个独立于 React 的 JavaScript 状态容器，也可以与其他视图库集成使用。
• Redux 的核心理念是单一数据源 (Single Source of Truth)，即应用程序中的所有状态都存在于一个单一的存储库中，并通过纯函数 (Pure Function) 修改状态。
• Redux 为应用程序提供了一个可预测的状态管理系统，同样适用于 SSR。

② Vuex

• Vuex 是一个专门为 Vue.js 设计的状态管理库，可以轻松地集成到 Vue.js 应用中使用。
• Vuex 将应用程序中所有组件的共享状态抽象为一个单一的状态树，并通过使用 action 和 mutation 来修改状态。
• Vuex 提供了丰富的 API，例如高级状态管理、插件和模块化等。

③ Pinia

• Pinia 是一个新型的状态管理库，和 Vuex 类似，但使用起来更加简单、直观。
• Pinia 基于 Vue.js 3 的 Composables API，使其易于编写可重用的逻辑和代码。更重要的是，它使用原生的 Proxy 对象来代替 Vue 2 中的 Object.defineProperty，使得 Pinia 更快、更高效。
• Pinia 的哲学是用比 Vuex 更优美的方式，以便支持 TypeScript、模块化设计和其他开箱即用的特性。

总之，Redux、Vuex 和 Pinia 都提供了一种可预测的状态管理方案，并有其自身独特的优点。具体选择哪一个取决于应用的复杂度、开发团队的技能水平和个人偏好等因素。如果是 Vue.js 3 的项目，可以考虑使用 Pinia，否则可以考虑 Vuex 或 Redux。

8、总结

总之，Vuex 是 Vue.js 生态中的一个非常重要的插件，适用于中大型的 Vue.js 应用，它通过提供集中式的状态管理模式、响应式更新、单向数据流、模块化组织和辅助函数等特性，可以更好地组织和管理应用的状态，提高开发效率和代码质量。