一、什么是vuex?

    Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.
    vuex是一个全局状态管理插件,用于解决组件之间传值的问题,使用一个全局状态树项目中的状态数据进行管理,遵循单项数据流的规范

二、vuex到底有什么用?

    在开发vue项目的过程中我们会遇到组件之间传值的问题,如果说是父与子通讯的话可以通过props来进行传值,但如果子传父或者是不相干组件(兄弟组件)相互传值就很麻烦了,他们需要共有的父组件通过自定义事件进行实现,如果父组件下有多个子组件, 子组件之间通讯的路径就会变的很繁琐, 父组件需要监听大量的事件, 还需要负责分发给不同的子组件, 很显然这并不是我们想要的组件化的开发体验.,

   vuex就是为了解决这种情况而出现的 

主要包含三项内容:
    1、state(存储数据),
    2、action(源发事件,处理异步请求,用以触发mutation),
    3、mutation(改变state,所有的状态改变都经过此方法,它里面的方法调用必须是同步的)
          getter(获取数据)

1、mapState 把vuex中的数据映射到当前组件中的计算属性,写法:如下图

引入mapstate方法
mapstate使用
这里用es6写法…请参考es6新特性

2、mapMutations 把vuex中的mapMutations映射到methods中,写法:如下图

引入方法
映入方法

 ···小结···:如 果 想 要 把 数 据 映 射 过 来 就 用 到 mapState
    如 果 想要把方法映射过来就是用mapMutations
到这里已经可以实现简单的页面传值了,待续…
Logo

前往低代码交流专区

更多推荐