Vuex中的輔助函式

mapstate-輔助函式

一、mapState

• 如果在一個元件中需要獲取多個狀態，通過this.$store.state來宣告就會顯得有些重複跟冗餘
• 通過mapState這個輔助函式可以幫助生成計算屬性

在store檔案中定義state

// store.js
state:{
	number1:1,
	number2:2
}

在元件中使用mapState，放置在computed裡面。

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default{
	computed:{
        // 在元件通過this就可呼叫，不用再寫this.$store.state
        //寫法1：
		...mapState(['number1','number2']), 
        
        //寫法2：可以定義別名
		...mapState({ 
    	     num1: state=>state.number1,
    	     number2: state=>state.number2
    	 }),
 
        
        //模組化時
        ...mapState({
            number1: state=>state.home.number1,
            number2: state=>state.home.number2,
         }),
	}
}
 

二、mapGetters

在store檔案中定義getters

//  store.js
getters:{
    total(state){
      return state.number1+state.number2
    }
},

在元件中使用mapGetters，放置在computed裡面。

computed:{
    //寫法1：
    ...mapGetters(['total']),
    //寫法2：  
    ...mapGetters({
      total:'total'
    }),  


    //當namespaced: true時
    ...mapGetters({
      total:'home/total'
    })
}
 

三、mapMutations

• mapMutations 其實跟mapState、mapGetters 的作用是類似的，將元件中的 methods 對映為store.commit 呼叫。

在store檔案中定義mutations

//  store.js
mutations:{
    changeNumber1(state, val){
        state.number1 += val
    },
    changeNumber2(state, val){
         state.number2 += val
    },
},

• 每一個mutation接受兩個引數，一個是state，一個是傳入值；

在元件中使用mapMutations，放置在methods裡面。

<template>
  <div>
    <h1>{{number1}}</h1>
    <h2 @click="changeNumber1(number1)">+{{number1}}</h2>
    <h1>{{number2}}</h1>
    <h2 @click="changeNumber2(number2)">+{{number2}}</h2>
  </div>
</template>

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default{
  computed:{
		...mapState(['number1','number2']) 
  }
  methods:{
    //方式1:
    ...mapMutations(['changeNumber1','changeNumber2']),
    //方式2: 定義別名方式
    ...mapMutations({
       changeNumber1Alias: 'changeNumber1',
       changeNumber2: 'changeNumber2'
    }),
        
      
    //當namespaced: true時
    ...mapMutations({
        changeNumber1: 'home/changeNumber1',
        changeNumber2: 'home/changeNumber2'
    })


  }
}

四、mapActions

• mapActions將元件中的 methods 對映為store.dispatch 呼叫。

在store檔案中定義actions

//store.js
mutations:{
    changeNumber1(state, val){
        state.number1 += val
    },
    changeNumber2(state, val){
       state.number2 += val
    },
},
actions:{
    changeNumber1Action(context,val){
        context.commit('changeNumber1',val);
    },
    changeNumber2Action(context,val){
        context.commit('changeNumber2',val);
    }
}

• 每一個action接受兩個引數，一個是context（上下文），一個是傳入值；

在元件中使用mapActions，放置在methods裡面。

<template>
  <div>
    <h1>{{number1}}</h1>
    <h2 @click="changeNumber1Action(number1)">+{{number1}}</h2>
    <h1>{{number2}}</h1>
    <h2 @click="changeNumber2Action(number2)">+{{number2}}</h2>
  </div>
</template>

// App.vue

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default{
  computed:{
		...mapState(['number1','number2']) 
  }
  methods:{
    //方式1:
    ...mapActions(['changeNumber1Action','changeNumber2Action']),
    //方式2: 定義別名方式
    ...mapActions({
        changeNumber1ActionAlias: 'changeNumber1Action',
        changeNumber2ActionAlias: 'changeNumber2Action'
     }),
    
        
    //當namespaced: true時
    ...mapActions({
        changeNumber1Action: 'home/changeNumber1Action',
        changeNumber2Action: 'home/changeNumber2Action'
     }),
        
  }
}

轉自：
https://blog.csdn.net/qq_42880714/article/details/108295431