一、提供數據

State提供唯一的公共數據源，所有共享的數據都要統一放到Store中的State狀態中存儲。

打開項目中的index.js文件，在state對象中可以添加我們要共享的數據。

// 創建倉庫 store
const store = new Vuex.Store({// state 狀態, 即數據, 類似于vue組件中的data,// 區別：// 1.data 是組件自己的數據, // 2.state 中的數據整個vue項目的組件都能訪問到state: {count: 101}
})

---

二、訪問Vuex中的數據

問題: 如何在組件中獲取count?

1. 通過$store直接訪問 —> {{ $store.state.count }}
2. 通過輔助函數mapState 映射計算屬性 —> {{ count }}

---

通過$store訪問的語法

先找到倉庫，再找到倉庫里的state

獲取 store：1.Vue模板中獲取 this.$store2.js文件中獲取 import 導入 store模板中：     {{ $store.state.xxx }}
組件邏輯中：  this.$store.state.xxx
JS模塊中：   store.state.xxx

---

1）模板中使用

組件中可以使用 $store 獲取到vuex中的store對象實例，可通過state屬性屬性獲取count， 如下

<h1>state的數據 - {{ $store.state.count }}</h1>

---

2）組件邏輯中使用

將state屬性定義在計算屬性中 https://vuex.vuejs.org/zh/guide/state.html

<h1>state的數據 - {{ count }}</h1><script>
// 把state中數據，定義在組件內的計算屬性中
computed: {count () {return this.$store.state.count}
}
</script>

---

3）js文件中使用

//main.jsimport store from "@/store"console.log(store.state.count)

每次都像這樣一個個的提供計算屬性, 太麻煩了,我們有沒有簡單的語法幫我們獲取state中的值呢？

---

三、通過輔助函數 - mapState獲取 state中的數據

由于上面獲取數據的方式有點長，此時我們只需要將其封裝到計算屬性中，就可以通過屬性名直接訪問了

mapState是輔助函數，幫助我們把store中的數據自動映射到 組件的計算屬性中, 它屬于一種方便的用法

用法 ：

1.第一步：導入mapState (mapState是vuex中的一個函數)

import { mapState } from 'vuex'

2.第二步：采用數組形式引入state屬性

mapState(['count']) 

上面代碼的最終得到的是 類似于，結果是得到一整個對象

console.log(mapState(['count', 'title']))

打印的這個對象，鍵就是屬性名，值就是一個計算屬性

// 這一整個對象肯定不能直接賦值給computed，這樣導致這個對象就直接給computed占滿了，但是我們后面還需要提供自己的計算屬性
count () {return this.$store.state.count
}

3.第三步：利用展開運算符將導出的狀態映射給計算屬性

  computed: {// 一旦丟在這里，就意味著下面還可以加其他的計算屬性// count () {//    return this.$store.state.count// }...mapState(['count'])}

 <div> state的數據：{{ count }}</div>