网站开发流程包括seo排名点击首页
一、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. 传参
传参直接在事件回调函数那里调用就行
