Vue Vuex解决重复的代码问题 简化代码

mapState简写

javascript 复制代码
$store.state.sum
$store.state.age
$store.state.num
....

这种这种方法取值,如果太多很麻烦,不便于维护

可以写出计算属性

html 复制代码
<h1>{{sum}}</h1>
....
javascript 复制代码
computed:{
sum(){return this.$store.state.sum }
},
....

这样提高了代码的可读性,但是值太多还是一样需要写很多的计算属性,这时候可以导入mapState来进行生成代码,这样大大的简化了代码,可读和维护性更高

html 复制代码
<h1>{{age}}</h1>
....
javascript 复制代码
import { mapState} from 'vuex'
//导入

computed:{

...mapState({ 

he:'sum',

// sum:'sum'

age:'age',

....
})

}

相当于

javascript 复制代码
sum(){return this.$store.state.sum }

//简化了很多

更简洁的写法

html 复制代码
<h1>{{age}}</h1>
....
javascript 复制代码
...mapState(['sum','age'])

sum age 一定需要和state里的名一样


mapGetters简写

和state一样

javascript 复制代码
import { mapState,mapGetters} from 'vuex'

mapMutations简写

javascript 复制代码
import { mapMutations } from 'vuex';

原始写法

javascript 复制代码
 add()
        { 
            this.$store.dispatch('addSum',1)
        }

简写

html 复制代码
<button @click="add(1)">加</button>  这里传参
javascript 复制代码
...mapMutations({add:'addSum'})
...mapMutations(['add'],'age')
//名字一样时这样使用

mapActions

javascript 复制代码
import {mapActions} from 'vuex'
html 复制代码
<button @click="addSum(1)">加</button>
javascript 复制代码
 ...mapActions(['addSum'])
相关推荐
奇舞精选22 分钟前
在 Chrome 浏览器里获取用户真实硬件信息的方法
前端·chrome
热忱11281 小时前
elementUI Table组件实现表头吸顶效果
前端·vue.js·elementui
林涧泣2 小时前
【Uniapp-Vue3】setTabBar设置TabBar和下拉刷新API
前端
Rhys..2 小时前
Jenkins pipline怎么设置定时跑脚本
运维·前端·jenkins
易林示2 小时前
chrome小插件:长图片等分切割
前端·chrome
w(゚Д゚)w吓洗宝宝了2 小时前
单例模式 - 单例模式的实现与应用
开发语言·javascript·单例模式
大叔_爱编程2 小时前
wx035基于springboot+vue+uniapp的校园二手交易小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
zhaocarbon2 小时前
VUE elTree 无子级 隐藏展开图标
前端·javascript·vue.js
浏览器爱好者3 小时前
如何在AWS上部署一个Web应用?
前端·云计算·aws
xiao-xiang3 小时前
jenkins-通过api获取所有job及最新build信息
前端·servlet·jenkins