前言:
Vuex中獲取數(shù)據(jù)的輔助函數(shù)有兩個(gè):mapState和mapGetters
-
mapState用于將state中的數(shù)據(jù)映射到組件的計(jì)算屬性中 -
mapGetters用于將getter中的計(jì)算屬性映射到組件的計(jì)算屬性空中
1. 輔助函數(shù)說明:
- 之前的使用vue的方法并不是特別好.獲取數(shù)據(jù)需要通過$store找到state對象,在獲取數(shù)據(jù),
- 操作getter,mutation,action也是如此,就會給使用帶來不便
- vuex提供了一些輔助函數(shù),幫助我們快速獲取數(shù)據(jù), 操作mutation,action函數(shù)
2. mapState
mapState是獲取數(shù)據(jù)的輔助函數(shù)
2.1 獲取數(shù)據(jù)說明
之前在使用vuex數(shù)據(jù)的時(shí)候我們都是在模板Mustache語法中直接獲取數(shù)據(jù),
這樣的操作并不是特別友好,每一次都需要重新獲取數(shù)據(jù)
因此比較常用的做法是將vuex中的數(shù)據(jù)獲取后保存在組件的計(jì)算屬性中
這樣如果在組件中多次使用數(shù)據(jù),就可以使用計(jì)算屬性的緩存
之前獲取數(shù)據(jù)示例代碼
<div class="count">數(shù)字: {{ $store.state.count }}</div>
將數(shù)據(jù)保存在計(jì)算屬性中,
示例代碼如下
<template>
<div class="home">
<!-- 此時(shí)只需要使用計(jì)算看屬性中的數(shù)據(jù)就可以了 -->
<div class="count">數(shù)字: {{ count }}</div>
</div>
</template>
<script>
export default {
name: 'Home',
data(){
},
computed:{
count(){
return this.$store.state.count
}
},
methods:{
}
}
</script>
2.2 計(jì)算屬性中的問題
說明:
- 如果在一個(gè)組件中需要使用很多vuex中的狀態(tài)
- 那么我們就需要在組件中定義所有的需要使用數(shù)據(jù)對應(yīng)的計(jì)算屬性
- 這樣反而變的繁瑣
示例代碼
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
為了解決組件需要獲取多個(gè)狀態(tài)的時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會有些重復(fù)和冗余的問題.
vuex提供了mapState輔助函數(shù)幫助我們自動生成計(jì)算屬性
注意:
使用mapState有不同使用方式
2.3.1 vuex中的狀態(tài)
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 組件中計(jì)算屬性名和vuex中的狀態(tài)名不一致
說明:
例如組件中需要獲取
vuex中count數(shù)據(jù)的內(nèi)容,但是在組件中有可能也有一個(gè)名為
count的數(shù)據(jù)因此在獲取
vuex中的count時(shí),組件的計(jì)算屬性就不能在為count了,故而計(jì)算屬性的名和
vuex狀態(tài)名不一致
示例代碼:
<template>
<div class="home">
<div class="count">vuex中數(shù)據(jù): {{ number }}</div>
<div >組件自己的數(shù)據(jù): {{ count }}</div>
</div>
</template>
<script>
// 從vuex中獲取mapState
import {mapState} from 'vuex'
export default {
name: 'Home',
data(){
return {
count: 10
}
},
computed:mapState({
// 將vuex中狀態(tài)count映射到組件計(jì)算屬性number上
// 1\. 普通使用
number: function(state){
return state.count
// this為當(dāng)前組件實(shí)例
// return state.count + this.count
},
// 2\. 簡寫方式
// number: state => state.count
// 3\. 極簡寫法
// 字符串"count" 等價(jià)于 state => state.count
// number: 'count'
}),
}
</script>
示例說明:
- 計(jì)算屬性的函數(shù)第一個(gè)參數(shù)為
vuex中的狀態(tài)state,因此可以通過state直接獲取數(shù)據(jù) - 計(jì)算屬性值為函數(shù), 如果只是獲取
vuex中數(shù)據(jù)并映射到組件就算屬性上, 可以使用簡寫方式 - 如果在計(jì)算屬性函數(shù)中需要使用組件自己的數(shù)據(jù),或是有其他的邏輯操作,建議寫完整函數(shù)
2.3.3 vuex狀態(tài)名和計(jì)算名一樣
說明:
如果vuex狀態(tài)名和映射的組件計(jì)算名完全一樣,
mapState可以直接傳字符串?dāng)?shù)組,來映射數(shù)據(jù)
實(shí)例代碼:
<template>
<div class="home">
<div>vuex中count數(shù)據(jù): {{ count }}</div>
<div>vuex中user數(shù)據(jù): {{ user }}</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'Home',
data(){
return {
// count: 10
}
},
// 字符串?dāng)?shù)組的寫法,
// 就是將vuex中的數(shù)據(jù)count,user
// 映射為組件計(jì)算屬性count,user上
computed:mapState([
"count",
"user"
]),
}
</script>
2.3.4 組件有自己的計(jì)算屬性
說明:
- 上面幾個(gè)示例中,計(jì)算屬性computed選項(xiàng)的值就是mapState
- 也就是組件的所有計(jì)算屬性都是從
stroe映射過來的 - 那么如果還有一個(gè)自己額外的計(jì)算屬性怎么辦
- 如果需要給組件添加自定義的計(jì)算屬性,就回歸到以前的寫法,mapState采用解構(gòu)的方式使用
示例代碼
<template>
<div class="home">
<div>vuex中數(shù)據(jù): {{ count }}</div>
<div>vuex中數(shù)據(jù): {{ user }}</div>
<div>組件計(jì)算屬性值: {{ computePrice }}</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'Home',
data(){
return {
price: 10
}
},
computed:{
// 組件自己的計(jì)算屬性
computePrice(){
return this.price * 2
},
// 通過mapState映射過來的計(jì)算屬性
... mapState([
"count",
"user"
])
},
}
</script>
2.4 mapGetters的使用
說明:
-
mapGetters是vuex提供的將store中的getter映射到組件計(jì)算屬性中的輔助函數(shù) -
mapGetters使用方式和mapState一樣 - 最常用的方式就是解構(gòu)方式
示例代碼如下:
<template>
<div class="home">
<div>{{fruits}}</div>
<div>{{filterFruits}}</div>
</div>
</template>
<script>
// 獲取mapState, mapGetters 輔助函數(shù)
import {mapState,mapGetters} from 'vuex'
export default {
name: 'Home',
data(){
return {
price: 10
}
},
computed:{
computePrice(){
return this.price * 2
},
... mapState([
"count",
"user",
"fruits"
]),
// 解構(gòu)mapGetters
// 將store中g(shù)etters里filterFruits
// 映射到組件的filterFruits計(jì)算屬性上
...mapGetters([
"filterFruits"
])
},
}
</script>
如果store中g(shù)etters里的計(jì)算屬性名和組件計(jì)算屬性名不同時(shí)
可以采用對象的寫法
...mapGetters([
// 組件中的計(jì)算屬性名: getters中的計(jì)算屬性名
fruits: "filterFruits"
])
