溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vuex的理解與使用

發(fā)布時間:2020-06-28 03:58:19 來源:網(wǎng)絡(luò) 閱讀:1182 作者:杏sunshine 欄目:web開發(fā)
   研究了一段時間的vuex,只是簡單地會用,對于里面的一些知識點還是
     不太會表達,就目前,先梳理一下自己對vuex中幾個主要概念的理解
    vuex一個專為 Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,主要是為了解決組
    件間的通信,方便數(shù)據(jù)的共用,如果不使用vuex,數(shù)據(jù)之間或許可以
    用子組件的傳值來解決,但是比較麻煩。
    概念的理解
    state: 狀態(tài)管理 ,儲存初始化數(shù)據(jù)

    getters:相當于store的計算屬性,對State 里面的數(shù)據(jù)二次處理

    mutations:改變state狀態(tài)的函數(shù),對數(shù)據(jù)進行計算的方法全部寫在里面,
    每個mutation都有一個事件類型和一個回調(diào)函數(shù),回調(diào)函數(shù)必須是同步
    的,通過this.$store.commit('decrement')來觸發(fā)

    actions:主要是commit mutations,而不是用于直接更變狀態(tài),是異步
    操作,通過this.$store.dispatch('decrement')來觸發(fā)

    mapState 輔助函數(shù),把全局的 state映射到當前組件的 computed 計算
    屬性中,返回的是一個對象
    之所以使用mapstate:當一個組件需要獲取多個狀態(tài)時候,將這些狀
    態(tài)都聲明為計算屬性會有些重復(fù)和冗余。

    mapGetters:把全局的getters映射到當前組件的 computed 計算屬性
    中,返回的是一個數(shù)組
    computed:mapGetters([
        'count'
        //映射 this.count 為 store.getters.count
    ]),

    mapMutations:將組件中的 methods 映射為 store.commit 調(diào)用
         methods:{
            ...mapMutations([  
                    'add'
                    //映射 this.add() 為 this.$store.commit('add')
            ])
        },

    mapActions::將組件中的 methods 映射為 store.dispatch 調(diào)用
        methods:{
             ...mapActions([
             'increment'
             // //映射 this.increment() 為 this.$store.dispatch('increment')
             ])
        },
向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI