vue中怎么使用vuex,解决传值问题(一)
一、什么是vuex? Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. vuex是一个全局状态管理插件,用于解决组件之间传值的问题,使用一个全局状态树项目中的状态数据进行管理,遵循单项数据流的规范...
·
一、什么是vuex?
Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.
vuex是一个全局状态管理插件,用于解决组件之间传值的问题,使用一个全局状态树项目中的状态数据进行管理,遵循单项数据流的规范
二、vuex到底有什么用?
在开发vue项目的过程中我们会遇到组件之间传值的问题,如果说是父与子通讯的话可以通过props来进行传值,但如果子传父或者是不相干组件(兄弟组件)相互传值就很麻烦了,他们需要共有的父组件通过自定义事件进行实现,如果父组件下有多个子组件, 子组件之间通讯的路径就会变的很繁琐, 父组件需要监听大量的事件, 还需要负责分发给不同的子组件, 很显然这并不是我们想要的组件化的开发体验.,
vuex就是为了解决这种情况而出现的
主要包含三项内容:
1、state(存储数据),
2、action(源发事件,处理异步请求,用以触发mutation),
3、mutation(改变state,所有的状态改变都经过此方法,它里面的方法调用必须是同步的)
getter(获取数据)
1、mapState 把vuex中的数据映射到当前组件中的计算属性,写法:如下图
这里用es6写法…请参考es6新特性
2、mapMutations 把vuex中的mapMutations映射到methods中,写法:如下图
···小结···:如 果 想 要 把 数 据 映 射 过 来 就 用 到 mapState
如 果 想要把方法映射过来就是用mapMutations
到这里已经可以实现简单的页面传值了,待续…
更多推荐
已为社区贡献1条内容
所有评论(0)