為什么要用?vuex?辣辫？
????????首先渴逻，需要清楚為什么要用?vuex?，當我們的應(yīng)用遇到?**多個組件共享狀態(tài)**?時
????????????????-?多層級父子組件狀態(tài)傳遞會特別繁瑣
????????????????-?非嵌套父子組件狀態(tài)傳遞也會特別繁瑣
vuex
????????Vuex?是一個專為?Vue.js?應(yīng)用程序開發(fā)的?**狀態(tài)管理模式**，類似?redux
這種狀態(tài)管理模式包含：
????????這種模式遵循的是?單向數(shù)據(jù)流?模式
vuex?的工作流
安裝?vuex
? ??????npm?i?vuex
????????????//?or
????????yarn?add?vuex
引入?vuex
? ??????通過?`import`?引入
? ? ? ? ? ????????? 通過?`import`?方式引入匆篓，需要手動安裝（手動調(diào)用?`Vue.use(Vuex)`）
? ??????通過?\<script\>?引入
????????????????????通過?\<script\>?方式引入，vuex?會自動安裝（也就是主動調(diào)用?`Vue.use(Vuex)`）
從?Store?開始
? ? ? ? `Store`? 就是倉庫寇窑，我們前面提到的?`state`?就存儲在?`store`?中鸦概，同時提交動作、修改狀態(tài)的方法也都由?`store`?提供和管理
創(chuàng)建一個?Store
import?Vue?from?'vue'
import?Vuex?from?'vuex'
Vue.use(Vuex)
let?store?=?new?Vuex.Store({
????state:?{},
????getters:?{},
????mutations:?{},
????actions:?{}
})
????????????必須在?`Vue.use(Vuex)`?之后創(chuàng)建?`store`
核心概念
????????-?state
????????-?getters
????????-?actions
????????-?mutations
state
state?的創(chuàng)建
????????存儲應(yīng)用狀態(tài)數(shù)據(jù)的對象甩骏，`state`?的值可以是一個對象窗市，也可以是一個返回對象的函數(shù)先慷，類似?vue?中組件的?`data`?，使用函數(shù)的方式
????????返回對象可以避免對象引用導致的副作用問題
????????通過?`store.state`?訪問狀態(tài)數(shù)據(jù)
?????????`state`?數(shù)據(jù)與組件?`data`?一樣是被追蹤的
在組件中使用?store
????問題： `state`?的更新并不會更新視圖
解決
? ? ? ? 用computed（計算屬性）
<template>
??<div?class="home">
????<h2>{{title}}</h2>
????<div>{{content}}</div>
??</div>
</template>
<script>
import?store?from?'@/stores'
export?default?{
??name:?'home',
??computed:?{
????title()?{
??????return?store.state.title
????},
????content()?{
??????return?store.state.content
????}
??}
}
</script>
store?配置
????????如果每個組件在使用?`store`?的時候都?`import`?會比較繁瑣谨设，這個時候熟掂，我們通過?vuex?提供的?`store`?選項把?`store`?對象注入
????????到?vue?的原型上
import?Vue?from?'vue'
import?App?from?'./App.vue'
import?router?from?'./router'
import?store?from?'@/stores'
Vue.config.productionTip?=?false
new?Vue({
??router,
??store,
??render:?h?=>?h(App)
}).$mount('#app')
????????????配置注入后，我們就可以在組件實例中使用?`this.$store`?來訪問?`store`?對象了
使用輔助函數(shù)?`mapState`
????????當一個組件需要獲取多個狀態(tài)時候扎拣，將這些狀態(tài)都聲明為計算屬性會有些重復(fù)和冗余赴肚。為了解決這個問題，我們可以使用?`mapState`?
????????輔助函數(shù)幫助我們生成計算屬性二蓝，讓你少按幾次鍵誉券，通常我們把?`store`?的?`state`?通過?`mapState`?函數(shù)映射到組件的?`computed`?上
通過對象方式進行映射
????????場景：當組件中已有與?`store`?同名的數(shù)據(jù)名稱
使用擴展運算符組合
????????通過對象擴展運算符，可以把?`mapState`?返回的?`state`?屬性與組件已有計算屬性進行融合
getters
????????有時候我們需要從?store?中的?state?中派生出一些狀態(tài)刊愚，類似組件的?`data`?與?`computed`踊跟，`store`?也提供了一個?`getters`?對象來處理
????????派生數(shù)據(jù)
getters?函數(shù)
????????與組件屬性一樣，我們是通過定義一個函數(shù)的形式來返回派生數(shù)據(jù)的鸥诽，`?getters`?函數(shù)接受兩個參數(shù)
????????????????-?第一個參數(shù)：`state`?對象
????????????????-?第二個參數(shù)：`getters`?對象
通過屬性訪問
????????同樣的商玫，與組件計算屬性一樣，默認是通過屬性的方式去訪問?`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)用
commit（提交）
? ??????type
????????????????????要提交的?`mutation`?回調(diào)函數(shù)名稱
? ??????payload
????????????????????載荷：提交的額外數(shù)據(jù)碴里，任意格式
mutation?函數(shù)
????????`mutation`?中的函數(shù)被?`commit`?執(zhí)行的時候沈矿，接收兩個參數(shù)
????????????????-???第一個參數(shù)：`state`?對象
????????????????-???第二個參數(shù)：?`commit`?提交的?`payload`
????????在?`mutation`?函數(shù)中，我們就可以通過?`state`?對象進行狀態(tài)數(shù)據(jù)的修改
使用輔助函數(shù)?`mapMutations`
????????`mapMutations`?函數(shù)的使用與?`mapState`?和?`mapGetters`?類似咬腋，但是其一般是把組件的?`methods`?映射
????????為?`store`?的?`mutations`?的?`commit`?調(diào)用
mutation?函數(shù)必須是同步的
????????`commit`?方法沒有返回值
actions
????????`action`?中的函數(shù)與?`mutation`?中的函數(shù)類似羹膳，但是它主要用來進行異步任務(wù)的處理，然后通過提交?`mutation`?來修改?`state`
????????????????>?注意：`action`?中的函數(shù)不要直接修改?`state`
dispatch派發(fā)
????????`action`?任務(wù)需要通過?`dispatch`?方法來提交（派發(fā)）根竿，與?`commit`?類似
????????`dispatch`?方法有返回值溜徙，且一定返回一個?`promise`?對象
action?函數(shù)
????????`action`?中的函數(shù)執(zhí)行的過程中也接受兩個參數(shù)
????????????????-?第一個參數(shù)：`store`?對象
????????????????-?第二個參數(shù)：?`dispatch`?提交的?`payload`
使用輔助函數(shù)?`mapActions`
????????與?`mapMutations`?函數(shù)類似，把組件的?`methods`?映射為?`store`?的?`actions`?的?`dispatch`?調(diào)用
Module
????????這個更多的是基于一種代碼組織結(jié)構(gòu)上的輔助
????????????????https://vuex.vuejs.org/zh/guide/modules.html
????????????????https://vuex.vuejs.org/zh/guide/structure.html
