前言:
Vuex中获取数据的辅助函数有两个:mapState和mapGetters
-
mapState用于将state中的数据映射到组件的计算属性中 -
mapGetters用于将getter中的计算属性映射到组件的计算属性空中
1. 辅助函数说明:
- 之前的使用vue的方法并不是特别好.获取数据需要通过$store找到state对象,在获取数据,
- 操作getter,mutation,action也是如此,就会给使用带来不便
- vuex提供了一些辅助函数,帮助我们快速获取数据, 操作mutation,action函数
2. mapState
mapState是获取数据的辅助函数
2.1 获取数据说明
之前在使用vuex数据的时候我们都是在模板Mustache语法中直接获取数据,
这样的操作并不是特别友好,每一次都需要重新获取数据
因此比较常用的做法是将vuex中的数据获取后保存在组件的计算属性中
这样如果在组件中多次使用数据,就可以使用计算属性的缓存
之前获取数据示例代码
<div class="count">数字: {{ $store.state.count }}</div>
将数据保存在计算属性中,
示例代码如下
<template>
<div class="home">
<!-- 此时只需要使用计算看属性中的数据就可以了 -->
<div class="count">数字: {{ count }}</div>
</div>
</template>
<script>
export default {
name: 'Home',
data(){
},
computed:{
count(){
return this.$store.state.count
}
},
methods:{
}
}
</script>
2.2 计算属性中的问题
说明:
- 如果在一个组件中需要使用很多vuex中的状态
- 那么我们就需要在组件中定义所有的需要使用数据对应的计算属性
- 这样反而变的繁琐
示例代码
export default {
name: 'Home',
data(){
return {
// count: 0
}
},
computed:{
count(){
return this.$store.state.count
},
user(){
return this.$store.state.user
},
// ...
},
methods:{
}
}
2.3 使用mapState
为了解决组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余的问题.
vuex提供了mapState辅助函数帮助我们自动生成计算属性
注意:
使用mapState有不同使用方式
2.3.1 vuex中的状态
let store = new Vuex.Store({
state:{
count:0,
user:{
name:"张三",
age:20
},
fruits:[{
name:"苹果",
price: 22
},{
name:"梨子",
price: 25
},{
name:"西瓜",
price: 16
},{
name:"香蕉",
price: 18
}]
},
// ....
})
2.3.2 组件中计算属性名和vuex中的状态名不一致
说明:
例如组件中需要获取
vuex中count数据的内容,但是在组件中有可能也有一个名为
count的数据因此在获取
vuex中的count时,组件的计算属性就不能在为count了,故而计算属性的名和
vuex状态名不一致
示例代码:
<template>
<div class="home">
<div class="count">vuex中数据: {{ number }}</div>
<div >组件自己的数据: {{ count }}</div>
</div>
</template>
<script>
// 从vuex中获取mapState
import {mapState} from 'vuex'
export default {
name: 'Home',
data(){
return {
count: 10
}
},
computed:mapState({
// 将vuex中状态count映射到组件计算属性number上
// 1. 普通使用
number: function(state){
return state.count
// this为当前组件实例
// return state.count + this.count
},
// 2. 简写方式
// number: state => state.count
// 3. 极简写法
// 字符串"count" 等价于 state => state.count
// number: 'count'
}),
}
</script>
示例说明:
- 计算属性的函数第一个参数为
vuex中的状态state,因此可以通过state直接获取数据 - 计算属性值为函数, 如果只是获取
vuex中数据并映射到组件就算属性上, 可以使用简写方式 - 如果在计算属性函数中需要使用组件自己的数据,或是有其他的逻辑操作,建议写完整函数
2.3.3 vuex状态名和计算名一样
说明:
如果vuex状态名和映射的组件计算名完全一样,
mapState可以直接传字符串数组,来映射数据
实例代码:
<template>
<div class="home">
<div>vuex中count数据: {{ count }}</div>
<div>vuex中user数据: {{ user }}</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'Home',
data(){
return {
// count: 10
}
},
// 字符串数组的写法,
// 就是将vuex中的数据count,user
// 映射为组件计算属性count,user上
computed:mapState([
"count",
"user"
]),
}
</script>
2.3.4 组件有自己的计算属性
说明:
- 上面几个示例中,计算属性computed选项的值就是mapState
- 也就是组件的所有计算属性都是从
stroe映射过来的 - 那么如果还有一个自己额外的计算属性怎么办
- 如果需要给组件添加自定义的计算属性,就回归到以前的写法,mapState采用解构的方式使用
示例代码
<template>
<div class="home">
<div>vuex中数据: {{ count }}</div>
<div>vuex中数据: {{ user }}</div>
<div>组件计算属性值: {{ computePrice }}</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'Home',
data(){
return {
price: 10
}
},
computed:{
// 组件自己的计算属性
computePrice(){
return this.price * 2
},
// 通过mapState映射过来的计算属性
... mapState([
"count",
"user"
])
},
}
</script>
2.4 mapGetters的使用
说明:
-
mapGetters是vuex提供的将store中的getter映射到组件计算属性中的辅助函数 -
mapGetters使用方式和mapState一样 - 最常用的方式就是解构方式
示例代码如下:
<template>
<div class="home">
<div>{{fruits}}</div>
<div>{{filterFruits}}</div>
</div>
</template>
<script>
// 获取mapState, mapGetters 辅助函数
import {mapState,mapGetters} from 'vuex'
export default {
name: 'Home',
data(){
return {
price: 10
}
},
computed:{
computePrice(){
return this.price * 2
},
... mapState([
"count",
"user",
"fruits"
]),
// 解构mapGetters
// 将store中getters里filterFruits
// 映射到组件的filterFruits计算属性上
...mapGetters([
"filterFruits"
])
},
}
</script>
如果store中getters里的计算属性名和组件计算属性名不同时
可以采用对象的写法
...mapGetters([
// 组件中的计算属性名: getters中的计算属性名
fruits: "filterFruits"
])
