萬字血書Vue—Vuex

Vuex概述

組件之間共享資料的方式（小范圍）

全域事件總線

Vuex是什么？

專門在Vue中實作集中式狀態（資料）管理的一個Vue插件，可以方便的實作組件之間的資料共享，

使用Vuex統一管理狀態的好處

• 能夠在vuex中集中管理共享的資料，易于開發和后期維護
• 能夠高效地實作組件之間的資料共享，提高開發效率
• 存盤在vuex中的資料都是回應式的，能夠實施保持資料與頁面的同步

什么時候用Vuex？

• 多個組件依賴同一狀態，
• 來自不同的組件的行為需要變更同一狀態，

Vuex作業原理

• Actions
• Mutations
• State（data）object

Vuex的基本使用

Vue2——Vuex3

Vue3——Vuex4

• 安裝vuex依賴包

npm i vuex --save

• 在入口檔案main.js，引入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

• 創建store物件

const store= new Vuex.store({
    //state中存放的就是全域共享的資料
    state:{count: 0}
})

將store物件掛載到vue實體中

new Vue({
    el:'#app',
    render:h=>h(app),
    router,
    //將創建的共享資料物件，掛載到vue實體中
    store
})

Vuex的核心概念

store有四個配置項寫到/strore/indx.js中

組件中讀取Vuex的資料：$store.state.sum

組件中修改Vuex的資料：$store.dispatch('action中的方法名',資料)或$store.commit('mutation中的方法名',資料)

State

State提供唯一的公共資料源，所有的共享資料都要統一放到Store的state中存盤

const store= new Vuex.store({
    //state中存放的就是全域共享的資料
    state:{count: 0}
})

//組件訪問state中資料的第一種方式：
this.$store.state.全域資料名稱 //template中this可以省略

//組件訪問state中資料的第二種方式：(復用性高)
//1、從vuex中按需匯入mapState函式
import { mapState} from 'vuex'

//2、將全域資料，映射為當前組件的計算屬性
computed:{
    //物件寫法
    ...mapState({jishu:'count'})//屬性名：jishu、方法名：count
    //陣列寫法（適用于計算屬性名和方法名相同的情況）
    ...mapState(['count'])
}

Mutation

千萬不要通過組件直接修改元資料！！！

Mutation用于變更Store中的資料

• 只能通過mutation變更Store資料，不能直接操作Store中的資料
• 通過這種方式雖然操作起來繁瑣，但是可以集中監控所有資料的變化

const store= new Vuex.store({
    //state中存放的就是全域共享的資料
    state:{count: 0},
    mutations:{
        add(state){
            state.count++
        }
    }
    
})

觸發mutation

//方法一
this.$store.commit('函式名',引數)
//方法二
//1、從vuex中按需匯入mapMutations函式
import { mapMutations} from 'vuex'

//2、將mutations函式，映射為當前組件的methods方法
methods:{
    //借助mapMutations生成對應的方法，方法中會呼叫commit去聯系mutations
    ...mapMutations(['add','addN'])
}

觸發mutation時傳遞引數

const store= new Vuex.store({
    //state中存放的就是全域共享的資料
    state:{count: 0},
    mutations:{
        add(state,step){
            state.count+=step
        }
    }
    
})

不要在mutations函式中執行異步操作！！！

Action

Action專門用于處理異步任務，不能使用Mutation，但是在Action中還是要通過觸發Mutation的方式間接變更資料，若沒有網路請求或其他業務邏輯，組件也可以越過actions，即不寫dispatch，直接撰寫commit，

const store= new Vuex.store({
    //state中存放的就是全域共享的資料
    state:{count: 0},
    mutations:{
        add(state){
            state.count++
        },
        actions:{
            addAsync(context){
                seTimeout(()=>{
                    context.commit('add')
                },1000)
            }
        }
    }
    
})

觸發Action

methods:{
handle(){
 //觸發actions的第一種方式
 this.$store.dispatch('addAsync')
}
}

 //觸發actions的第二種方式
1、從vuex中按需匯入mapActions函式
import { mapActions} from 'vuex'

2、將actions函式，映射為當前組件的methods方法
methods:{
    ...mapActions(['addAsync'])
}

觸發Action攜帶引數

const store= new Vuex.store({
    //state中存放的就是全域共享的資料
    state:{count: 0},
    mutations:{
        add(state,step){
            state.count+=step
        },
        actions:{
          addAsync(context，step){
               seTimeout(()=>{
                    context.commit('add',step)
                },1000)
            }
        }
    }
})

methods:{
handle(){
 this.$store.dispatch('addAsync',5)
}
}

Getter

• Getter用于對Store中的資料進行加工處理形成新的資料，類似于Vue的計算屬性
• Store中資料的發生變化，Getter的資料也會跟著變化

const getters={
	bigSum(state){
		retutn state.sum*10;
	}
}

export default new Vuex.Store({
    ......
    getters
})

//組件訪問Getter的第一種方式：
this.$store.getters.名稱 
//組件訪問Getter的第二種方式：(復用性高)
1、從vuex中按需匯入mapGetters函式
import { mapGetters} from 'vuex'

2、將全域資料，映射為當前組件的計算屬性
computed:{
    ...mapGetters(['count'])
}

標籤：其他

上一篇：Vue——initState【十】

下一篇：前端設計模式——計算屬性模式