如果要獲取store里面的state的city屬性。首先來看看沒有使用mapState的情況,

{{this.$store.state.city}}

再來看看使用mapState后

{{this.city}}

那么為什么會這樣呢？先來看看官方的定義：當一個組件需要獲取多個狀態(tài)時候，將這些狀態(tài)都聲明為計算屬性會有些重復和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計算屬性，讓你少按幾次鍵：

首先什么是狀態(tài)？即state，state又是用來存儲一些數(shù)據(jù)的，所以不難理解。

看代碼

import {mapState} from "vuex"
// 使用mapState,此時，city已經(jīng)被映射了，所以可以直接使用this.city去獲取屬性值
computed:{
    //意思是將vuex中的city數(shù)據(jù)映射到組件的computed屬性里
    ...mapState(["city"])
}

還有一種使用方法,意思是將store里面的state里面的city屬性映射到computed屬性中的currentCity中。即currentCity代表了$store.state.city

computed:{
        ...mapState({
            currentCity:"city"
        })
    }