vuex基础总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex基础总结相关的知识,希望对你有一定的参考价值。

参考技术A

Vuex 是一个专为 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基础总结的主要内容,如果未能解决你的问题,请参考以下文章

Vuex的全面用法总结

Vue 学习总结笔记

vuex总结

vueX总结

Vue总结第六天:Vuex (全局变量管理~多个页面共享数据)

vuex概念总结及简单使用实例