Vue2知识点（六）（vuex的配置项使用（续））

1.getter的使用

1.概念：当state中的数据需要加工后再使用时，可以使用getters加工

2.在store.js中追加getters配置

......
const getters={
	bigSum(state){
		return state.sum=10
	}
}

//创建并暴露store
export defalut new Vuex.Store({
	......
	getters
})

3.组件中读取数据：$store.getters.bigSum

2.四个map方法的使用

1.mapState方法：用于帮助我们映射state中的数据为计算属性

computed:{
	//借助mapState生成计算属性：sum,school,subject(对象写法)
    ...mapState({sum:'sum',school:'school',subject:'subject'}),
    //借助mapState生成计算属性：sum,school,subject(数组写法)
    ...mapState(['sum','school','subject'])
}

2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed:{
	//借助mapGetters生成计算属性：bigSum(对象写法)
    ...mapGetters({bigSum:'bigSum'}),
    //借助mapGetters生成计算属性：bigSum(数组写法)
    ...mapGetters([bigSum])
}

3.mapActions方法：用于帮助我们生成actions对话的方法，即：包含$store.dispatch(xxx)函数

methods:{
    //靠.mapActions生成：incrementOdd,incrementWait(对象形式)
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    
    //靠.mapActions生成：incrementOdd,incrementWait(数组形式)
    ..mapActions(['jiaOdd','jiaWait'])
}

4.mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{
    //靠mapMutations生成：increment,decrement(对象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN'})
    
    //靠mapMutations生成：JIA,JIAN(数组形式)
    ...mapMutations(['JIA','JIAN'])
}

注：mapActions与mapMutations使用时，若需要传递参数需要：模板中绑定事件时传递好参数，否则参数是事件对象

3.模块化+命名空间

1.目的：让代码更好维护，让更多数据分类明确

2.修改：store.js

const countAbout={
  	namespaced:true,//开启命名空间
    state:{x,1},
    mutations:{.....},
    actions:{...},
	getters:{
        bigSum(state){
            return state.sum=0;
        }
    }
}
    
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']
//方式二：借助maoGetters读取
...mapGetters('countAbout',['bigSum'])

5.开启命名空间后，组件中调用dispatch

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

6.开启命名空间后，组件中调用commit

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