vuex是為vue.js應(yīng)用程序開發(fā)的 狀態(tài)管理模式，它集中的儲存所有的組件狀態(tài)，并以一定的規(guī)則去改變狀態(tài) 。
它解決的問題：
? ? ? ? 1.多個組件依賴于一個狀態(tài)時，對于多層組件的傳參非常的繁瑣，并且對于同級之間的狀態(tài)的傳遞未能為力。
? ? ? ? 2.來自不同的行為需要變更同意狀態(tài)，以往采用父子組件直接引用或通過事件來變更和同步狀態(tài)的多層拷貝，會導(dǎo)致無法維護的代碼。
Vuex有5個核心屬性：State? Getter? ?Mutation? ?Action? ?Module
state -- 是單一的狀態(tài)樹，可以在state中定義我們需要的對象，數(shù)組，字符串等等。用于管理數(shù)據(jù)，管理的數(shù)據(jù)是響應(yīng)式的，當(dāng)數(shù)據(jù)改變時驅(qū)動視圖更新。.
getter -- 跟vue的計算屬性相似，當(dāng)我們store的state屬性中衍生出一些狀態(tài)，那么我就需要getter，getter會接收state為第一個參數(shù)，而且getter的返回值會根據(jù)他的依賴被緩存起來，只有在getter中的依賴值（state中的某個需要派生的值）發(fā)生改變時才會重新計算。
mutations -- 更改store中state的狀態(tài)，每個mutation都有一個字符串類型的事件類型和一個回調(diào)函數(shù)，如果要改變state的狀態(tài)就要在回調(diào)函數(shù)中改變。執(zhí)行這個函數(shù)我們要執(zhí)行一個相應(yīng)的調(diào)用方法。store.commit。更新數(shù)據(jù)，state中的數(shù)據(jù)只能使用mutations去改變數(shù)據(jù),Mutation 必須是同步函數(shù).
actions -- actions可以提交mutations，在actions中可以執(zhí)行store.commit,在actions中可以進行異步操作。在頁面中使用actions，要用到store.dispatch。響應(yīng)數(shù)據(jù)響應(yīng)成功后交給mutations。
modules -- 其實就是解決了當(dāng)state中很復(fù)雜臃腫的時候，module可以將store分割成模塊，每個模塊中擁有自己的state,mutations,actions和getter。
vue 項目中的配置
在vue的src中添加store文件夾并且設(shè)置名為index.js的js文件，在js文件中如下操作
2.在main.js文件中導(dǎo)入vuex實例? import?store?from?'./store' --并且放入到new Vue中store方便全局調(diào)用
3.在組件中標(biāo)簽使用$store.state.num可以導(dǎo)入vuex中的狀態(tài)（數(shù)據(jù)）
4.也可以在組件computed中導(dǎo)入
?????????num?()?{
??????????????return?this.$store.state.num? // $store.state調(diào)用state中的數(shù)據(jù)
????????????}
5.導(dǎo)入import?{?mapState?}?from?'vue'? 在computed通過 ...mapState（[ 'mapState' ]）導(dǎo)出state中的數(shù)據(jù)
如果組件自己有計算屬性，state的字段映射成計算屬性
mutations 定義修改數(shù)據(jù)的函數(shù)
參數(shù)state當(dāng)前申明的state選項中的數(shù)據(jù)，params 接受數(shù)據(jù) , payload 載荷（運送數(shù)據(jù)）建議對象{}形式
mutations: {
mm?(state?,?payload)?{
??????return?state.num?=?state.num?+?payload.num
????}
}
組件調(diào)用
methods:{
clicks?()?{
??????this.$store.commit('mm',{?num:20?})? // $store.commit調(diào)用mutations 中的方法
????}
}
效果前
效果后
mapMutations
把vuex中的mutations的函數(shù)映射到組件的methods中
通俗：通過mapMutations函數(shù)可以生成methods中函數(shù)
import { mapMutations } from 'vuex'
?methods:?{
????...mapMutations(['mm']),
????clicks?()?{
??????this.mm({num:?20})
????}
??}
actions
// 異步獲取數(shù)據(jù)
? actions: {
? ? // actions 中的函數(shù)有默認(rèn)傳參 context
? ? // context ：執(zhí)行上下文 執(zhí)行環(huán)境? ----- 函數(shù)能夠使用到的對象（vuex實例===this.$store）
? ? getData ({commit}, num) {
? ? ? // 模擬異步的獲取數(shù)據(jù)
? ? ? window.setTimeout(()=>{
? ? ? ? const data = num
? ? ? ? // 通過commit提交數(shù)據(jù)給mutations修改數(shù)據(jù)
? ? ? ? commit('mm', data)
? ? ? },2000)
? ? ? // Promise形式
? ? ? // return new Promise((r) => {
? ? ? //? setTimeout(() => {
? ? ? //? ? commit('mm', num);
? ? ? //? ? r()
? ? ? //? }, 2000)
? ? ? // })
? ? }
? }
組件中調(diào)用
clicks1?()?{
??????this.$store.dispatch('getData',?{num:?50})? //? this.$store.dispatch用于調(diào)用actions中的異步方法
}
效果
注意：action 提交的是 mutation，而不是直接變更狀態(tài)。action 可以包含任意異步操作。
mapActions
mapActions輔助函數(shù)，把actions中的函數(shù)映射組件methods中
通俗：通過mapActions函數(shù)可以生成methods中函數(shù)
import { mapActions } from 'vuex'
...mapActions(['getDat'])
?clicks1?()?{
??????this.getDat({num:?50})
????}
