Vuex的认识

it2022-05-08  9

Vuex是什么?

Vuex是一个专门为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化

 Vuex的核心概念

vuex的属性 vuex有五大核心属性: state, getter, mutation, action, module state: 存储数据,存储状态,在根实例中注册了store后,用this.$store.state来访问; 对应vue里面的data,存放数据方式为响应式,vue组件从store中读取数据,如数据发生变化,组件也会对应的更新. getter:可以认为是storer的计算属性,它的返回值会根据它的依赖被缓存起来,且只有当它的依赖发生了改变才会被重新计算. mutation: 更改vuex的store中的状态的唯一方法是提交mutation. action: 包含任意异步操作,通过提交mutation间接变更状态. module: 将store分割成模块,每个模块都具有state,getter,mutation,action,甚至是嵌套子模块 更改state状态为什么要通过commit来提交mutation? 因为我们想要明确的跟踪状态的变化 再次强调,我们通过提交mutation的方式,而非直接改变store.state.count,是因为我们想要明确地追踪到状态的变化。这个简单的 约定能够让你的意图更加明显,这样你在阅读代码的时候能更容易地解读应用内部的状态改变,此外,这们也让我们有机会去实现一些 能记录每次状态改变,保存阙云太快照的调试工具,有了它,我们甚至可以实现如时间穿梭般的调试体验。 由于 store 中的状态是响应式的,在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在 组件的 methods 中提交 mutation。 对于vuex的数据传递流程,如下图所示 当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法,actions里面的每个方法中都会有一个commit方法 当方法执行的时候会通过commit来触发mutations里面的方法进行数据修改.mutations里面的每个函数都有一个state参数,这样 就可以在mutations里面进行state的数据修改,当数据修改完毕后,会传导给页面,页面的数据也会发生改变

 为什么要使用vuex?

由于传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力. 我们经常会采用父子组件直接引用或通过事 件来变更和同步状态的多份拷贝,以上的这些模式非常脆弱,通常会导致代码无法维护所以我们需要把组件的共享状态抽取出来,以一个全局 单例模式管理.在这种模式下,我们的组件构成了一个巨大的"视图",不管在树的哪个位置,任何组件都能获取状态或者触发行为. 另外, 通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更加结构化且易维护. 缺点 如果你不打算开发大型单面应用,使用vuex可能会繁琐冗余,确实是如此---如果你的应用够简单,你最好不要使用vuex,一个简单的 store模式就足够你所需了(杀鸡用牛刀的感觉)

 


最新回复(0)