对 Vuex 的理解（核心、状态修改、特点、缺点、底层原理）

结论先行

Vuex 是一个专门为 Vue.js 设计的集中式状态管理库，核心是解决组件间的通信和数据的共享问题；小项目一般不用 Vuex，因为 Vuex 比较大，中大型复杂应用的时候才会用到。

它有四大将，分别是 state、mutations、actions、getters。

state 用于存放的数据状态；

mutations 用于修改 state 中的状态；

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

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

 底层原理： 

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

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

其他特点：

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

② 提供了辅助函数：用于简化组件中对状态的读取和操作。

缺点：

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

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

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

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

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

⑤ 模块需要增加 namespaced；

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

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

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、总结

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