vuex使用mapState，mapGetters等进行代码优化

最新推荐文章于 2024-09-15 21:36:53 发布

慕宁儿

最新推荐文章于 2024-09-15 21:36:53 发布

阅读量201

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/stead_fast/article/details/119783636

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

简化模板中插值语法中的表达式。

mapState用于帮助我们映射state中的数据为计算属性

mapGetters用于帮助我们映射getters中的数据为计算属性

mapActions用于帮助我们生成与actions对话的方法，即包含$store.dispatch(xxx)的函数，传递的参数需要在绑定事件时携带，否则参数是事件对象

mapMutations用于帮助我们生成与mutations对话的方法，即包含$store.commit(xxx)的函数，传递的参数需要在绑定事件时携带，否则参数是事件对象

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

computed:{
    //借助mapState生成计算属性，从stste中读取数据（对象写法）
    //...mapState({he:'sum',xuexiao:'school'})
    //借助mapState生成计算属性，从stste中读取数据（数组写法），自定义计算属性名与state中对应属性名一致
    ...mapState(['sum','school']) ,
	//借助mapGetters生成计算属性，从getters中读取数据（数组写法）
	...mapGetters(['bigSum'])
    
}
methods:{
    //借助mapMutations生成对应的方法方法中会调用commit去联系mutations
    //...mapMutations({add:'ADD',subt:'SUBT'})
    //数组写法
    ...mapMutations(['ADD','SUBT'])
    //借助mapActions生成对应的方法方法中会调用dispatch去联系actions,传递的参数需要在事件触发时携带
    ...mapActions(['addOdd'])
    
}

优化示例

优化前详情
优化后，通过计算属性模板中可以直接使用sum

methods: {
    // add(){
    //     // this.sum += this.n
    //     // this.$store.dispatch("add",this.n)
    //     this.$store.commit("ADD",this.n)
    // },
    // subt(){
    //     // this.sum -= this.n
    //     // this.$store.dispatch("subt",this.n)
    //     this.$store.commit("SUBT",this.n)
    // },
    ...mapMutations(["ADD","SUBT"]),
    ...mapActions(["addOdd","addWait"])
    // addOdd(){
    //     // if(this.sum % 2){
    //     //     this.sum += this.n
    //     // }
    //     this.$store.dispatch("addOdd",this.n)
    // },
    // addWait(){
    //     // setTimeout(() => {
    //     //     this.sum += this.n
    //     // }, 1000);
    //     this.$store.dispatch("addWait",this.n)
    // }
},
computed:{
    ...mapState(['sum']),
    ...mapGetters(['bigSum'])
}