目录
一、getters的使用
1.概念
当 state 中的数据需要经过加工后再使用时,可以使用 getters 加工
2.在store.js中追加getters配置
......
const getters = {
bigSum(state){
return state.sum*10
}
}
//创建并暴露store
export default new Vuex.Store({
......
getters
})
3.组件中读取数据
$store.getters.bigSum
二、四个map方法的使用
1.mapState方法
用于帮助我们映射 state 中的数据为计算属性
computed:{
//借助mapState生成计算属性,从state中读取数据(对象写法)
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性,从state中读取数据(数组写法)
...mapState(['sum','school','subject']),
},
2.mapGetter方法
用于帮助我们映射 getters 中的数据为计算属性
computed:{
//借助mapGetters生成计算属性,从getters中读取数据(对象写法)
...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成计算属性,从getters中读取数据(数组写法)
...mapGetters(['bigSum'])
}
3.mapActions方法
用于帮助我们生成与 actions 对话的方法,即:包含 $store.dispatch(xxx) 的函数
methods:{
//借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法)
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
//借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(数组写法)
...mapActions(['jiaOdd','jiaWait']),
}
4.mapMutations方法
用于帮助我们生成与 mutations 对话的方法,即:包含 $store.commit(xxx) 的函数
methods:{
//借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(数组写法)
...mapMutations(['JIA','JIAN']),
}
备注:mapActions 与 mapMutations 使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象