為什么要用?vuex?？
????????首先，需要清楚為什么要用?vuex?，當(dāng)我們的應(yīng)用遇到?**多個(gè)組件共享狀態(tài)**?時(shí)
????????????????-?多層級(jí)父子組件狀態(tài)傳遞會(huì)特別繁瑣
????????????????-?非嵌套父子組件狀態(tài)傳遞也會(huì)特別繁瑣
vuex
????????Vuex?是一個(gè)專為?Vue.js?應(yīng)用程序開發(fā)的?**狀態(tài)管理模式**，類似?redux
這種狀態(tài)管理模式包含：
????????這種模式遵循的是?單向數(shù)據(jù)流?模式
vuex?的工作流
安裝?vuex
? ??????npm?i?vuex
????????????//?or
????????yarn?add?vuex
引入?vuex
? ??????通過?`import`?引入
? ? ? ? ? ????????? 通過?`import`?方式引入，需要手動(dòng)安裝（手動(dòng)調(diào)用?`Vue.use(Vuex)`）
? ??????通過?\<script\>?引入
????????????????????通過?\<script\>?方式引入，vuex?會(huì)自動(dòng)安裝（也就是主動(dòng)調(diào)用?`Vue.use(Vuex)`）
從?Store?開始
? ? ? ? `Store`? 就是倉庫，我們前面提到的?`state`?就存儲(chǔ)在?`store`?中，同時(shí)提交動(dòng)作、修改狀態(tài)的方法也都由?`store`?提供和管理
創(chuàng)建一個(gè)?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)建
????????存儲(chǔ)應(yīng)用狀態(tài)數(shù)據(jù)的對(duì)象，`state`?的值可以是一個(gè)對(duì)象，也可以是一個(gè)返回對(duì)象的函數(shù)，類似?vue?中組件的?`data`?，使用函數(shù)的方式
????????返回對(duì)象可以避免對(duì)象引用導(dǎo)致的副作用問題
????????通過?`store.state`?訪問狀態(tài)數(shù)據(jù)
?????????`state`?數(shù)據(jù)與組件?`data`?一樣是被追蹤的
在組件中使用?store
????問題： `state`?的更新并不會(huì)更新視圖
解決
? ? ? ? 用computed（計(jì)算屬性）
<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?配置
????????如果每個(gè)組件在使用?`store`?的時(shí)候都?`import`?會(huì)比較繁瑣，這個(gè)時(shí)候，我們通過?vuex?提供的?`store`?選項(xiàng)把?`store`?對(duì)象注入
????????到?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')
????????????配置注入后，我們就可以在組件實(shí)例中使用?`this.$store`?來訪問?`store`?對(duì)象了
使用輔助函數(shù)?`mapState`
????????當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問題，我們可以使用?`mapState`?
????????輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵，通常我們把?`store`?的?`state`?通過?`mapState`?函數(shù)映射到組件的?`computed`?上
通過對(duì)象方式進(jìn)行映射
????????場(chǎng)景：當(dāng)組件中已有與?`store`?同名的數(shù)據(jù)名稱
使用擴(kuò)展運(yùn)算符組合
????????通過對(duì)象擴(kuò)展運(yùn)算符，可以把?`mapState`?返回的?`state`?屬性與組件已有計(jì)算屬性進(jìn)行融合
getters
????????有時(shí)候我們需要從?store?中的?state?中派生出一些狀態(tài)，類似組件的?`data`?與?`computed`，`store`?也提供了一個(gè)?`getters`?對(duì)象來處理
????????派生數(shù)據(jù)
getters?函數(shù)
????????與組件屬性一樣，我們是通過定義一個(gè)函數(shù)的形式來返回派生數(shù)據(jù)的，`?getters`?函數(shù)接受兩個(gè)參數(shù)
????????????????-?第一個(gè)參數(shù)：`state`?對(duì)象
????????????????-?第二個(gè)參數(shù)：`getters`?對(duì)象
通過屬性訪問
????????同樣的，與組件計(jì)算屬性一樣，默認(rèn)是通過屬性的方式去訪問?`getters`?中的數(shù)據(jù)的，這種方式與組件的計(jì)算屬性一樣，
????????也是會(huì)緩存 結(jié)果的
通過方法訪問
????????我們還可以通過閉包函數(shù)的形式返回一個(gè)函數(shù)，來實(shí)現(xiàn)給?`getters`?函數(shù)傳參，需要注意的是這種方式不支持結(jié)果緩存
使用輔助函數(shù)?`mapGetters`
????????與?`mapState`?函數(shù)類似，通常映射到組件的?`computed`?上
mutations（改變）
????????更改?Vuex?的?store?中的狀態(tài)的唯一方法是提交?mutation（類似?redux?中的?action?+?reducer），Vuex?中的?mutation?非常類似于事件：
????????每個(gè)?mutation?都有一個(gè)字符串的?**事件類型?(type)**?和?一個(gè)?**回調(diào)函數(shù)?(handler)**
????????????????`mutation`?中的函數(shù)不要直接調(diào)用
commit（提交）
? ??????type
????????????????????要提交的?`mutation`?回調(diào)函數(shù)名稱
? ??????payload
????????????????????載荷：提交的額外數(shù)據(jù)，任意格式
mutation?函數(shù)
????????`mutation`?中的函數(shù)被?`commit`?執(zhí)行的時(shí)候，接收兩個(gè)參數(shù)
????????????????-???第一個(gè)參數(shù)：`state`?對(duì)象
????????????????-???第二個(gè)參數(shù)：?`commit`?提交的?`payload`
????????在?`mutation`?函數(shù)中，我們就可以通過?`state`?對(duì)象進(jìn)行狀態(tài)數(shù)據(jù)的修改
使用輔助函數(shù)?`mapMutations`
????????`mapMutations`?函數(shù)的使用與?`mapState`?和?`mapGetters`?類似，但是其一般是把組件的?`methods`?映射
????????為?`store`?的?`mutations`?的?`commit`?調(diào)用
mutation?函數(shù)必須是同步的
????????`commit`?方法沒有返回值
actions
????????`action`?中的函數(shù)與?`mutation`?中的函數(shù)類似，但是它主要用來進(jìn)行異步任務(wù)的處理，然后通過提交?`mutation`?來修改?`state`
????????????????>?注意：`action`?中的函數(shù)不要直接修改?`state`
dispatch派發(fā)
????????`action`?任務(wù)需要通過?`dispatch`?方法來提交（派發(fā)），與?`commit`?類似
????????`dispatch`?方法有返回值，且一定返回一個(gè)?`promise`?對(duì)象
action?函數(shù)
????????`action`?中的函數(shù)執(zhí)行的過程中也接受兩個(gè)參數(shù)
????????????????-?第一個(gè)參數(shù)：`store`?對(duì)象
????????????????-?第二個(gè)參數(shù)：?`dispatch`?提交的?`payload`
使用輔助函數(shù)?`mapActions`
????????與?`mapMutations`?函數(shù)類似，把組件的?`methods`?映射為?`store`?的?`actions`?的?`dispatch`?調(diào)用
Module
????????這個(gè)更多的是基于一種代碼組織結(jié)構(gòu)上的輔助
????????????????https://vuex.vuejs.org/zh/guide/modules.html
????????????????https://vuex.vuejs.org/zh/guide/structure.html
