当前位置: 首页 > Web前端 > vue.js

Vuex数据共享中心

时间:2023-03-31 19:15:53 vue.js

vuex出现前的原因,共享数据的问题:1.写的特别繁琐2.依赖极其混乱3.不必要的重新渲染vuex出现后,专门解决了共享数据的问题。一些特殊的技巧使组件的依赖关系更加清晰。当数据发生变化时,只渲染依赖于数据的组件。优点集中管理(共享)数据,易于开发和维护。高效实现组件间数据共享,提高开发效率。存储vuex中的数据是响应式的,数据发生变化,使用的地方会实时自动更新。基本使用第一步:安装依赖包npmivuex--save第二步:importimportVuexfrom'vuex'Vue.use(Vuex)第三步:创建store对象conststore=newVuex.store({state:{计数:0}});第四步:将store实例挂载到Vue根实例并关联newVue({el:"#app",render:h=>h(app),store,router})安装完成后,会出现一个公共属性添加到vue实例中:$store的原理是通过Vue.prototype.$store添加五个核心的概念State(状态仓库),用于存储所有共享数据组件。computeddeclaration组件中state中共享数据的访问方式为1.第一种直接访问(不推荐)//非模块this.$store.state.全局数据名//模块this.$store.state.modulename.globaldataname2.辅助函数的第二种使用(推荐)1.导入mapState辅助函数import{mapState}from'vuex'2fromvuex,将当前组件需要的全局数据映射到的计算属性中当前组件//非模块写法computed:{...mapState(['count'])}或者computed:{...mapState({count:state=>state.count,//firstcount:'count'//second})}//模块计算:{...mapState({count:state=>state.modulename.count})}注意:官方建议我们把vuex的state属性绑定到computed上,为什么不绑定到data上呢?幻觉:data中的内容只会在触发createdhook之前初始化一次,然后需要通过js修改data中的属性值,让页面响应变化,然后将state中的数据绑定到data上,以及状态中的数据将发生变化。data里面相应的数据也会相应的变化吧?答:以上说法一半正确,一半错误。怎么了?报错是:如果state中的state值类型是数值、Boolean、string等基本数据类型,那么赋值就是传值,如下leta=12;letb=a;a=20;alert(a)//20alert(b)//12所以你明白了,如果把state中的状态传递给data,那么当state中的状态改变时,因为不是引用传递,data中对应的属性值不会change总结:数据是在createhook中触发的因为预初始化的数据中没有依赖跟踪,所以必须通过引用来实现响应式getter(状态处理,封装)用于封装状态中的状态,并将不修改状态下的原始数据。类似于computedproperties当state中的数据发生变化时,getter中的数据也会发生变化。当使用响应式组件时,它们必须在计算声明中定义。//getter也是一个函数state:{count:0},getters:{doneTodos:state=>{return'Currentlatestquantity'+state.count+'ones'}}use//第一种方式this.$store.getters.name//第二种方式1.importmapGetters辅助函数import{mapGetters}fromvuexondemandfromvuex2,mapimportedgetterfunctiontothecurrentcomponentcomputedcomputedattributecomputed:{...mapGetters(['doneTodos'])}Mutation(修改状态)vuex不允许直接修改状态中的数据,必须使用Mutation来修改Mutation中定义的函数必须是同步函数,不能是异步定义函数//定义的函数接受2个参数:1,state2,参数传递mutations:{increment(state,params){//改变状态state.count++}}在组件中使用//第一个方法this.$store.commit('increment',12);//第二种方法(作为方法使用,更简单方便)1.从vuex2导入mapMutation辅助函数import{mapMutations},将导入的变异函数映射到当前Component方法中函数方法:{...mapMutations(['increment'])}3.调用this.increment(parameter)时;模块,如何使用?//第一种方式this.$store.commit('base/increment',12);//第二种方式1.importmapMutationfromvuexondemand辅助函数import{mapMutations}fromvuex2,待导入的mutation函数,映射到当前组件的方法函数方法:{...mapMutations(['base/increment']),...mapMutations('base',['increment'])}3.调用this['base/increment'](4)this.increment(13)Action(异步操作)和Mutation类似,唯一不同的是:mutation是一个同步函数,唯一修改状态值的方法是一个异步函数,但是不能修改状态值定义函数//定义的函数接受2个参数:1,context2,参数传递actions:{incrementAsync(context,params){setTimeout(()=>{context.commit('increment',params)},1000)}}组件使用//第一种方式this.$store.dispatch('incrementAsync',12);//第二种两种方式(作为方法使用,更简单方便)1.按需从vuex导入mapMutation辅助函数import{mapActions}fromvuex2,将导入的action函数映射到当前组件方法的methods函数:{...mapActions(['incrementAsync'])}3.如何使用this.incrementAsync(parameter);模块?//第一种方法this.$store.dispatch('base/incrementAsync',12);//第二种方法1.importmapMutationfromvuexondemand辅助函数import{mapActions}fromvuex2,要导入的action函数,映射到当前组件的方法函数方法:{...mapActions(['base/incrementAsync']),...mapActions('base',['incrementAsync'])}3.调用this['base/incrementAsync'](4)this.incrementAsync(13)