Vue的mapState是一個非常方便的工具，它允許我們在Vue組件中輕松地將Vuex store中的state映射到組件的計算屬性中。

//在組件中使用mapState
import { mapState } from 'vuex'
export default {
//...
computed: {
//使用 ES2015 的對象計算屬性命名功能來使用一個常量作為函數名
...mapState({
//映射 this.count 為 store.state.count
count: state =>state.count,
//為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
countPlusLocalState (state) {
return state.count + this.localCount
}
}),
//使用對象展開運算符將此對象混入到外部對象中
...mapState('some/nested/module', {
a: state =>state.a,
b: state =>state.b
})
}
}

使用mapState時，我們可以將一個字符串數組傳遞給它，以包含我們希望映射的state屬性的名稱。這些名稱將被用作計算屬性的屬性名，該計算屬性將訪問Vuex store中對應的state值。

//簡單的映射
computed: {
...mapState([
//將 this.count 映射為 store.state.count
'count'
])
}

我們還可以為每個映射的屬性自定義計算邏輯。在這種情況下，我們可以提供一個回調函數作為映射的值。

//定義映射
computed: {
...mapState({
//將 `this.count` 映射為 `store.state.count`
count: state =>state.count,
//將 `this.count` 映射為 `store.state.count` 的別名
countAlias: 'count',
//使用箭頭函數和函數參數解構來進行簡寫
countPlusLocalState ({ count }) {
return count + this.localCount
}
})
}

除了映射state，我們還可以使用mapState來訪問getter。我們只需要將一個對象作為參數傳遞，其中key是component computed property 的名稱，value是一個函數，用于計算getter返回的值。

computed: {
// 使用 `mapGetters` 輔助函數展開為計算屬性
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
]),
//或者，使用對象展開運算符展開為計算屬性
...mapGetters({
// 將 `this.doneCount` 映射為 `store.getters.doneTodosCount`
doneCount: 'doneTodosCount'
})
}

綜上所述，通過使用Vue的mapState，我們可以更方便地將Vuex store中的state狀態映射到組件中，從而提高組件的效率和易用性。