從Store 開始：
Store 就是倉庫，我們前面提到的 state 就儲存在Store 中 ，同事提交動作，修改裝袋的犯法也都由store 提供和管理

image.png

核心概念：
-state -getters -mutation -actions

-state
儲存應(yīng)用狀態(tài)數(shù)據(jù)的 對象 。state 的值可以使一個對象，也可以是一個返回對象的函數(shù)，類似 vue 中組件的 data，使用函數(shù)的方式返回對象可以避免對象引用導(dǎo)致的副作用問題

image.png

問題： state 的更新不會更新視圖
解決方法： 使用 cumputed

image.png

store 配置
如果每個組件在使用 store 的時候都 import 會比較繁瑣，這個時候，我們通過 vuex 提供的 store 選項把 store 對象注入到 vue 的原型上

image.png

使用輔助函數(shù) mapState
當(dāng)一個組件需要獲取多個狀態(tài)時候，將這些狀態(tài)都聲明為計算屬性會有些重復(fù)和冗余，為了解決這個問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計算屬性，讓你少按幾次鍵，通常我們把 store的 state 通過 mapState 函數(shù)映射到組件 computed 上

image.png

使用擴(kuò)展運(yùn)算符組合
通過對象擴(kuò)展運(yùn)算符，可以把 mapState 返回的 state 屬性與組件已有計算屬性進(jìn)行融合

image.png

9、getters

有時候我們需要從 store 中的 state 中派生出一些狀態(tài)，類似組件的 data 與 computed，store 也提供了一個 getters 對象來處理派生數(shù)據(jù)

getters 函數(shù)

與組件屬性一樣，我們是通過定義一個函數(shù)的形式來返回派生數(shù)據(jù)的，getters 函數(shù)接受兩個參數(shù)

• 第一個參數(shù)：state 對象
• 第二個參數(shù)：getters 對象

通過屬性訪問

同樣的，與組件計算屬性一樣，默認(rèn)是通過屬性的方式去訪問 getters 中的數(shù)據(jù)的，這種方式與組件的計算屬性一樣，也是會緩存結(jié)果的

通過方法訪問

我們還可以通過閉包函數(shù)的形式返回一個函數(shù)，來實現(xiàn)給 getters 函數(shù)傳參，需要注意的是這種方式不支持結(jié)果緩存

使用輔助函數(shù) mapGetters

與 mapState 函數(shù)類似，通常映射到組件的 computed 上

mutations

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation（類似 redux 中的 action + reducer），Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)

mutation 中的函數(shù)不要直接調(diào)用

提交：

image.png

type
要提交的 mutation回調(diào)函數(shù)名稱，type為固定的key

palyoad
載荷： 提交的額外數(shù)據(jù)，任意格式
mutation
mutation 中的函數(shù)被 commit 執(zhí)行的時候，接受二個參數(shù)
第一個參數(shù) state 對象
第二個參數(shù) commit 提交的 palyoad
在 mutation 函數(shù)中，我們就可以通過 state 對象 進(jìn)行狀態(tài)數(shù)據(jù)的修改
使用輔助函數(shù) mapMutation
mapMutation 函數(shù)的使用 與 mapState 和 mao Getters 類似，但是其一般是吧 組件 methods 映射為 store 的 mutations 的 commit 調(diào)用
mution 函數(shù) 必須是同步的 commite 方法沒有 返回值

actions
action 中和函數(shù)一 mutation 中的函數(shù) 類似， 但是他組套同來進(jìn)行異步認(rèn)為的處理沒然后 通過提交 mutation 來修改 state

提交

image.png

action 任務(wù)需要 通過 第三怕他V環(huán)方法 來 提交（派發(fā)），與 commit 類似
dispatch 方法有 返回值，且一定返回一個 promise對象

cation函數(shù)：
cation 中的函數(shù) 執(zhí)行的時候，也要接受二個參數(shù)
第一個參數(shù) state 對象
第二個參數(shù) dispatch提交的 palyoad

使用輔助函數(shù) ，apActions
與mapMutations 函數(shù)類似，把組件的 methods 映射為 store 的 zctions 的 dispatch 調(diào)用