getters的使用
? ? ? 1唇聘、概念:當(dāng)state中的數(shù)據(jù)需要經(jīng)過(guò)加工后再使用時(shí)驾荣,可以使用getters加工摸屠。
? ? ? 2、在store.js中追加getters配置
? ? ? ? const getters = {
? ? ? ? ? ? bigSum(state){
? ? ? ? ? ? ? return state.sum * 10
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //創(chuàng)建并暴露store
? ? ? ? export default new Vuex.Store({
? ? ? ? ? ? ...
? ? ? ? ? ? getters
? ? ? ? })
? ? ? 3描函、組件中讀取數(shù)據(jù):$store.getters.bigSum
四個(gè)map方法的使用
? ? ? 1、mapState方法: 用于幫助我們映射state中的數(shù)據(jù)計(jì)算屬性
? ? ? ? computed:{
? ? ? ? ? ? //借助mapSate生成計(jì)算屬性 (對(duì)象寫法)
? ? ? ? ? ? ...mapState({sum:'sum'})
? ? ? ? ? ? //數(shù)組寫法
? ? ? ? ? ? ...mapState(['sum'])
? ? ? ? }
? ? ? 2狐粱、mapGetters方法: 用于幫助我們映射getters中的數(shù)據(jù)為計(jì)算屬性
? ? ? ? computed:{
? ? ? ? ? ? //借助mapGetters生成計(jì)算屬性 (對(duì)象寫法)
? ? ? ? ? ? ...mapGetters({bigSum:'bigSum'})
? ? ? ? ? ? //數(shù)組寫法
? ? ? ? ? ? ...mapGetters(['bigSum'])
? ? ? ? }
? ? ? 3舀寓、mapActions方法: 用于幫助我們生成與actions對(duì)話的方法,即:包含$store.dispatch(xxx)的函數(shù)
? ? ? ? methods:{
? ? ? ? ? ? //靠mapActions生成incrementOdd肌蜻、incrementWait方法(對(duì)象形式)
? ? ? ? ? ? ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
? ? ? ? ? ? //數(shù)組寫法
? ? ? ? ? ? ...mapActions(['incrementOdd','incrementWait'])
? ? ? ? }
? ? ? 4互墓、mapMutations方法:用于幫助我們生成與mutation對(duì)話的方法,即:包含$store.commit(xxx)函數(shù)
? ? ? ? methods:{
? ? ? ? ? ? //靠mapActions 生成:increment蒋搜,decrement(對(duì)象形式)
? ? ? ? ? ? ...mapMutations({increment:'JIA'篡撵,decrement:'JIAN'})
? ? ? ? ? ? //數(shù)組寫法
? ? ? ? ? ? ...mapMutations(['JIA','JIAN'])
? ? ? ? }