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