优化稳定网站排名,获取页面内容wordpress,龙岩网站排名,自己电脑做网站服务器违法吗一、mapState和mapGetters
如果我们想要读取VueX中的State数据的Getters数据时#xff0c;需要使用$store.state.数据名 和 $store.getters.数据名。
当我们State和getters中的数据多了以后#xff0c;书写会很麻烦#xff1a; 如果我们想要使用方便可以配置计算属性来简化…一、mapState和mapGetters
如果我们想要读取VueX中的State数据的Getters数据时需要使用$store.state.数据名 和 $store.getters.数据名。
当我们State和getters中的数据多了以后书写会很麻烦 如果我们想要使用方便可以配置计算属性来简化书写 但是这样配置计算属性过于繁琐为了便于书写VueX为我们提供了mapState和mapGetters来方便我们书写。 一引入mapState和mapGetters import { mapState, mapGetters } from vuex; 二配置mapState和mapGetters
我们配置mapState和mapGetters是在计算属性中配置。
1. 数组写法
因为mapState和mapGetters返回的是一个对象所以我们需要使用...扩展运算符进行处理。 computed : { ...mapState([ 数据1, 数据2... ]), ...mapGetters([数据1, 数据2...]) } 注意这里的数据名称是state中的数据名称创建出来的计算属性名称与其同名 2. 对象写法
使用对象写法在模板中的数据使用新数据 computed:{ ...mapState({ 新数据1 : 数据1, 新数据2 : 数据2 }), ...mapGetters({ 新数据1 : 数据1, 新数据2 : 数据2 }) } 二、 mapActions和mapMutaions
我们调用Actions和Mutations中的方法要一直调用this.$store.dispatch 和 this.$store.commit 写法有些繁琐。
VueX为我们提供了mapActions和mapMutaions能够对这些方法的调用进行简写。 一引入mapActions和mapMutaions import { mapActions, mapMutaions } from vuex; 二配置mapActions和mapMutaions
1. 数组写法 methods : { ...mapActions([ 方法1, 方法2... ]), ...mapMutations([方法1, 方法2...]) } 2. 对象写法 methods : { ...mapActions({ 新方法1 : 方法1, 新方法2 : 方法2 }), ...mapMutations({ 新方法1 : 方法1, 新方法2 : 方法2 }) } 3. 传参
传参直接在事件回调函数那里调用就行
