一定是用过vue.js的童鞋，一定知道vue各个组件之间传值的痛苦。基于父子和兄弟组件，我们传值可能会很方便，但是如果是在不相关的组件之间及时使用同一套数据就显得力不从心了，而vuex很好的解决了我们的问题。所以，Vuex也是必须要掌握的，出门面试也是要问问题的，下面简单介绍一下vuex是如何管理组件状态的。官方也有详细的教程，大家可以戳这里，不过感觉太官方了，所以整理了1.1父子组件间共享数据的方式：v-bind属性绑定，props接收；$父母/$孩子；$参考；$attrs/$listeners;子级传值给父级：v-on事件绑定，结合$emit触发器；$父母/$孩子；兄弟组件之间共享数据：EventBus；浏览器；$onaccept数据组件$emit发送数据的组件1.2Vuex原理介绍Vuex实现了一种单向的数据流，有一个状态来全局存储数据。当组件想要改变state中的数据时，必须通过mutations来完成，mutations同时提供subscriber模式用于外部插件调用获取state数据更新。而当所有异步操作（常用于异步调用后端接口获取数据）或批量同步操作都需要用到action，但action不能直接修改state时，还是需要触发mutations中的方法，然后修改状态数据的突变。数据改变后，相应地推送到组件，组件重新渲染到视图。Vuex是vue的状态管理器，存储的数据是响应式的。但是不会保存，刷新后会回到初始状态。具体方法是当vuex中的数据发生变化时，将数据复制一份保存到localStorage中。刷新后，如果localStorage中有保存的数据，则将其取出，替换为状态下的store。1.3Vuex是一种实现组件全局状态（数据）管理的机制，可以轻松实现组件间的数据共享高效实现组件间的数据共享，提高开发效率。Vuex中存储的数据是响应式的，可以保持数据和页面实时同步。1.4什么样的数据适合存储在Vuex中？只需要将共享数据存储在Vuex中即可；对于组件中的私有数据，仍然可以存储在组件本身的数据中。多个视图依赖同一个状态：比如多个组件之间的数据共享，可以在不同的页面获取用户信息不同视图的行为需要改变同一个状态：比如用户会员信息，可以在不同的页面改变2.1VuexBasic使用安装Vuex依赖包：npminstallvuex--save，一定要加上--save，因为生产环境也要用到这个包。导入Vuex包importVuefrom'vue'importVuexfrom'vuex'//挂载VuexVue.use(Vuex)创建store对象conststore=newVuex.Store({//状态存储在全局共享数据中state:{count:0}})导出默认商店；将store对象挂载到vue实例上newVue({el:'#app',render:h=>h(app),router,//共享要创建的数据对象，挂载到Vue实例上//所有组件都可以从storestore获取全局数据})3.1Vuex中的主要核心概念1.State数据仓库State提供了唯一的公共数据源，所有共享的所有数据都存储在Store的State中。组件访问State中数据的第一种方式：this.$store.state。全局数据名组件访问State中数据的第二种方式：//1.导入mapState函数import{mapState}from'ondemandfromvuexvuex'//2.通过刚刚导入的mapState函数，将需要的全局数据currentcomponent映射到当前componentcomputed的computed属性：{...mapSate(['count'])}2.MutationMutation用于改变store中的Data。Store数据只能通过mutation来改变，不能直接操作Store中的数据。它通过提交突变来修改。它的本质其实是一个函数。这种方式虽然操作有点繁琐，但是可以集中监控所有的数据变化。变异操作必须是同步的。每次我们提交一个mutation，都会有一个记录。Vuex这样做是为了更容易记录每次数据变化的历史和轨迹，方便监控和回滚操作。第一种突变触发方法：//在store.js中定义突变store=newVuex.Store({state:{count:0},mutations:{add(state){state.count++//改变状态}}})//incomponentTriggermutationmethodsin:{handle(){//第一个触发突变的方法this.$store.commit('add')}}触发突变时传递参数：//store.jsmutations:{addN(state,step){//第一个参数是state，后面的参数是store.commit传入的附加参数，即mutation的payloadstate.count+=step}}//this.$store.commit('addN'inthecomponent,3)//第二种调用提交函数并使用参数触发突变的方法：//1.根据需要从vuex导入mapMutations函数functionimport{mapMutations}from'vuex'//2.通过新导入的mapMutations函数将指定的mutations函数映射到当前组件的方法上。函数方法：{...mapMutations(['add','addN'])}注意：不要在mutations函数中执行异常步骤操作，比如添加延迟器3.ActionAction用于处理异步任务。如果通过异步操作更改数据，则必须使用Action而不是Mutations，但仍然需要通过在Action中触发Mutation来间接更改数据。第一种触发动作的方式：//在store.js中定义动作store=newVuex.store({//...省略其他代码动作：{addAsync(context,payload){setTimeout(()=>{context.commit('add')},1000)}}})//在组件中触发Actionmethods:{handle(){this.$store.dispatch('addAsync',3)}}注意：不要使用突变函数，执行异步操作，例如添加延迟器；只有在mutations中定义的函数才有权修改状态中的数据；在actions中，state中的数据不能直接修改，必须通过context.commit触发mutation。context：上下文对象，相当于箭头函数中的this，与store实例具有相同的属性和方法。payload:mounted参数触发第二种方式的actions：//1.按需导入mapActions函数importfromvuex{mapActions}from'vuex'//2.通过新导入的mapActions函数，将指定的actions函数映射到methods当前组件methods的功能：{...mapActions(['addAsync','addN'])}4.GetterGetter用于处理Store中的数据，形成新的数据。Getter不会修改Store中的原始数据，它只是作为一个包装器。Getter可以对Store中已有的数据进行处理，形成新的数据。和Vue的computedproperty和computedproperty类似，getter的返回值会根据它的依赖关系缓存起来，只有当它的依赖值发生变化时才会重新计算。即Store中的数据发生变化，Getter中的数据也会随之变化//DefineGetterconststore=newVuex.store({state:{count:0},getters:{//监听state的变化valuesinrealshowNum:state=>{return'当前最新的数量是['+state.count+']'}}})第一种getter的使用方式：this.$store.getters。名称getter的第二种使用方式：import{mapGetters}from'vuex'computed:{...mapGetters(['showNum'])}好了，分享一些Vuex的简单知识。当然，这些只是表面现象。对学者的简单理解和帮助~~~:)
