state作為一個(gè)“唯一數(shù)據(jù)源”
一糯笙、在 Vue 組件中獲得 Vuex 狀態(tài)
1.直接方式
{{$store.state.count}}
2.利用計(jì)算屬性：
computed:{
count(){
return this.$store.state.count
}
}
當(dāng)一個(gè)組件需要多種狀態(tài)的時(shí)候州刽，用computed顯得特別冗余迎献，這時(shí)候我們就可以用輔助函數(shù)：mapState
3.mapState
- 數(shù)組形式
import {mapState} from "vuex" //引入
computed: mapState([ //數(shù)組格式
"num" //可以是一個(gè)對(duì)象绢慢，數(shù)組
]),
注意：計(jì)算屬性的名稱與 state 的中定義的數(shù)據(jù)名稱相同時(shí)，可以傳入數(shù)組格式陵吸。
- 對(duì)象形式
computed: mapState({
// count: state => state.num //箭頭函數(shù)
//等同于
count (state) { //state可以是一個(gè)對(duì)象玻墅，數(shù)組
return state.num
}
// 為了能夠使用 `this` 獲取局部狀態(tài)介牙，必須使用常規(guī)函數(shù)
countPlusLocalState (state) {
return state.count + this.localCount
}
}),
