vuex基础总结
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex基础总结相关的知识,希望对你有一定的参考价值。
参考技术AVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。也是一种组件间通信的方式。
上面的例子只是一个简单的组件间通信的例子,在实际项目中,组件间的通信往往比这要复杂的很多,所以说当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏
而vuex就是将所有状态集中管理起来,更加方便的实现组件间的通信,以往要实现数据的传递需要一步一步的向上传递,有了vuex,所有组件都可以向vuex中存数据,也可以取数据
多个组件共享数据或者是跨组件传递数据时
然后在组件中就可以通过this.$store访问到vuex了
state作为唯一的数据源,所有的共享数据都存放在state中,如:
vuex不允许在组件中修改state中的状态,如果想要修改state的数据,唯一的方法就是通过mutations修改,其实在组件中是可以直接修改的,但是这样通过mutations修改的方式,可以更加集中的监控所有数据的变化。
在mutations中定义一些修改state数据的方法,方法第一个参数就是state对象
(1)触发mutation的方法
这次是在组件的methods中,将mutation映射成methods的方法
(2)mutation传值(官网将传递的值称为载荷)
对于mutaion而言,方法接受的第一个参数始终是自身的state,第二个才是传递过来的参数,这个参数一般是一个对象,因为对象可以携带更多的数据。当然只有一条数据可以只传递这条数据
还可以写成一种对象的方式
mapMutations传值
(3)注意
actions和mutations类似,不同的是,actions是提交mutation修改共享数据,不是直接改变共享数据的,只有通过mutation才能修改state中的函数;actions中可以执行异步操作。actions中的每一个方法的第一个参数默认使context,是与 store 实例具有相同方法和属性的对象(context !== store对象)。而在组件中执行actions方法的方式就是:this.$store.dispatch(\'方法名\')
比如定义一个定时器异步的使count自增
而提交mutation的方法是commit,利用解构赋值将commit结构出来,提交mutation修改state的值
有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤等,其实也可以理解为是类似vue的计算属性,函数接受一个参数state,也就是数据源,数据也是响应式的,state数据变化。getters里面的数据也会随之变化,不会修改state中的数据,第二个参数是getters,通过这个属性我们就可以访问到其他的getter了
组件中访问getters中的属性
其实和state差不多,就不多说了
下一节:vuex模块化
以上是关于vuex基础总结的主要内容,如果未能解决你的问题,请参考以下文章