Vuex中的store文件中四個map方法的使用以及模塊化和命名空間

四個map方法的使用

• mapState方法：用於幫助我們映射state中的數據為計算屬性

computed: {
    //借助mapState生成計算屬性: sum、school、subject（對象寫法)
    ...mapState({sum:'sum',school:'school',subject:'subject'}),
    //借助mapState生成計算屬性: sum、 school、subject （數組寫法)
    ...mapState(['sum','school','subject'])，
},

• mapGetters方法：用於幫助我們映射getters中的數據為計算屬性

computed: {
    //借助mapGetters生成計算屬性: bigSum（對象寫法)
    ...mapGetters({bigSum:'bigSum'}),   
    //借助mapGetters生成計算屬性: bigSum（數組寫法)
    ...mapGetters(['bigsum'])
},

• mapActions方法：用於幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數

methods:{
    //靠mapActions生成: incrementOdd、 incrementWait（對象形式)
    ...mapActions({incrementOdd :'jiaOdd' ,incrementwait:'jiaWait'})
    //靠mapActions生成: incrementOdd、 incrementWait（數組形式)
    ...mapActions([ 'jiaOdd','jiaWait'])
}

• mapMutations方法：用於幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數

methods:{
    //靠mapActions生成:increment、decrement（對象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    //靠mapMutations生成:JIA、JIAN（對象形式)
    ...mapMutations(['JIA','JIAN']),
}

備注: mapActions與mapMutations使用時，若需要傳遞參數需要:在模板中綁定事件時傳遞好參數，否則參數是事件對象。

模塊化+命名空間

1.目的：讓代碼更好維護，讓多種數據分類更加明確。

2.修改store.js

const countAbout = {
namespaced:true,//開啟命名空間
    state:{x:1},
    mutations:{ ... },
    actions: { ... },
    getters: {
        bigSum(state){
            return state.sum*10
        }
    }
}
const personAbout = {
    namespaced:true,//開啟命名空間
    state:{ ... },
    mutations: { ... },
    actions: { ... }
}
const store = new Vuex.Store({
    modules: {
        countAbout,
        personAbout
   }
})

3.開啟命名空間后，組件中讀取state數據:

//方式一:自己直接讀取
this.$store.state.personAbout. list
//方式二:借助mapState讀取:
...mapState('countAbout', ['sum','school','subject']),

4.開啟命名空間后，組件中讀取getters數據:

//方式一:自己直接讀取
this.$store.getters ['personAbout/firstPersonName']
//方式二:借助mapGetters讀取;
...mapGetters('countAbout',['bigSum'])

5.開啟命名空間后，組件中調用dispatch

//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions:
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiawait'})

6.開啟命名空間后，組件中調用commit

//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations:
...mapMutations('countAbout' ,{increment:'JIA', decrement:'JIAN'})，