Vuex
Vuex状态管理跟使用传统全局变量的不同之处
vuex是一个专为vue.js应用程序开发的状态管理模式
1.Vuex的状态存储是响应式的:就是当你的组件使用到了这个Vuex的状态,一旦它改变了,
所有关联的组件都会自动更新相对应的数据,这样开发者省事很多。
2.不能直接修改Vuex的状态:如果是个全局对象变量,要修改很容易,但是在Vuex中不能这样做,
想修改就得使用Vuex提供的唯一途径:显示地提交(commint)mutations来实现修改。
这样做的好处就是方便我们跟踪每一个状态的变化,在开发过程中调试的时候,非常实用。
二、vuex五大核心属性:state,getter,mutation,action,module
1、state:存储数据,存储状态;在根实例中注册了store 后,用 this.$store.state
来访问;
对应vue里面的data;存放数据方式为响应式,vue组件从store中读取数据,如数据发生变化,组件也会对应的更新。
2、getter:可以认为是 store 的计算属性,它的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
类似于computed,对state里的数据进行一些过滤,改造等等
3、mutation:同步操作 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
4、action:异步操作,通过提交 mutation 间接更变状态。
5、module:将 store 分割成模块,可以让每一个模块拥有自己的state、mutation、action、getters,、甚至是嵌套子模块。
使得结构非常清晰,方便管理
总结:
当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会有一个commit方法,
当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。mutations里面的每个函数都会有一个state参数,
这样就可以在mutations里面进行state的数据修改,当数据修改完毕后,会传导给页面。页面的数据也会发生改变。
为什么要使用Vuex
由于传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。
我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致代码无法维护。
所以我们需要把组件的共享状态抽取出来,以一个全局单例模式管理。在这种模式下,我们的组件树构成了一个巨大的“视图”,
不管在树的哪个位置,任何组件都能获取状态或者触发行为!另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,
我们的代码将会变得更结构化且易维护。
使用场景:
购物车、登录注册、复杂的组件通信