mapState与mapGetters语法糖
vuex中的 mapState,mapGetters 属于辅助函数,其实就是vuex的一个语法糖,使代码更简洁更优雅。<script>import { mapState, mapGetters } from "vuex"export default {computed: {//原先templateInfo(){return this.$store.state.templateInfo}
·
vuex中的 mapState,mapGetters 属于辅助函数,其实就是vuex的一个语法糖,使代码更简洁更优雅。
import { mapState, mapGetters } from "vuex"
export default {
computed: {
//原先state中的数据
templateInfo(){
return this.$store.state.templateInfo
},
//现在
...mapState([
"templateInfo",
]),
//原先getters中的数据
isPreview(){
return this.$store.getters.isPreview
},
//现在
...mapGetters([
'isPreview'
])
},
created(){
//使用时
this.templateInfo,
this.isPreview
}
}
mapState与mapGetters只能在computed中使用,与正常的computed中的函数一起使用时需要用扩展运算符,然后在mapState或mapGetters函数的数组中放入对应的state或getters中的名称。
1.若要使用某个模块中的state,则第一个参数是模块名称
...mapState("moduleA", {
test1: state => state.test1,
test2: "test2"
}),
2.若要使用多个模块中的state,以上方法有点太累赘,则用以下方法
...mapState({
currentType: state => state.app.currentType,
userId: state => state.user.userId,
}),
以上两种方法对getters同样有效。
3.通过state中的值再动态计算出getters中的值
const getters = {
alarmName: state => {
return (row) => state.app.alarmTypes.find(item => item.alarmType == row.alarmType)
},
},
更多推荐
已为社区贡献3条内容
所有评论(0)