结论先行
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 应用,它通过提供集中式的状态管理模式、响应式更新、单向数据流、模块化组织和辅助函数等特性,可以更好地组织和管理应用的状态,提高开发效率和代码质量。