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'})，