快捷導(dǎo)航

vue前端開(kāi)發(fā)輔助函數(shù)狀態(tài)管理詳解示例

更新時(shí)間：2021年10月09日 17:15:54 作者：guoyp2126

vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個(gè)輔助函數(shù)，所謂的輔助函數(shù)分別對(duì)State、Getters、Mutations、Actions在完成狀態(tài)的使用進(jìn)行簡(jiǎn)化

mapState

當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問(wèn)題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性。不使用mapState時(shí)，獲取對(duì)象狀態(tài)，通常放在使用組件的computes屬性中，使用方式為：

  //....
  computed: {
        count: function(){
            return this.$store.state.count
        }
    }
 //....

使用mapState可以簡(jiǎn)化為：

import { mapState } from 'vuex'  //引入mapState對(duì)象 
export default {
  // ...
  computed: mapState({
    // 箭頭函數(shù)可使代碼更簡(jiǎn)練
    count: state => state.count,
  })
}
或者
import { mapState } from 'vuex'  //引入mapState對(duì)象 
export default {
  // ...
  computed: mapState({
    'count', //與state名稱一致
     countAlias：'count' //countAlias是在引用組件中使用的別名
  })
}

mapGetters

mapGetters 輔助函數(shù)僅僅是將 store 中的 getters 映射到局部計(jì)算屬性，與state類似。由計(jì)算函數(shù)代碼簡(jiǎn)化為；

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
  // 使用對(duì)象展開(kāi)運(yùn)算符將 getters 混入 computed 對(duì)象中
    ...mapGetters([
      'countDouble',
      'CountDoubleAndDouble',
      //..
    ])
  }
}

mapGetters也可以使用別名。

mapMutations

使用 mapMutations 輔助函數(shù)將組件中的methods映射為store.commit調(diào)用，簡(jiǎn)化后代碼為：

import { mapMutations } from 'vuex'
export default {
  //..
  methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 為 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 為 this.$store.commit('increment')
    })
  }
}

mapActions

使用 mapActions 輔助函數(shù)將組件的methods映射為store.dispatch調(diào)用，簡(jiǎn)化后代碼為：

import { mapActions } from 'vuex'
export default {
  //..
  methods: {
    ...mapActions([
      'incrementN' //映射 this.incrementN() 為 this.$store.dispatch('incrementN')
    ]),
    ...mapActions({
      add: 'incrementN' //映射 this.add() 為 this.$store.dispatch('incrementN')
    })
  }
}

示例

沿用vue狀態(tài)管理（二）中的示例，使用輔助函數(shù)完成。在CountChange和ComputeShow兩個(gè)組件使用了輔助函數(shù)，其余代碼無(wú)需改動(dòng)。
在ComputeShow使用了mapState，mapGetters兩個(gè)輔助函數(shù)，代碼如下

<template>
  <div align="center" style="background-color: bisque;">
    <p>以下是使用computed直接獲取stores中的狀態(tài)數(shù)據(jù)，狀態(tài)數(shù)據(jù)發(fā)生變化時(shí)，同步刷新</p>
    <h1>使用computed接收 state:{{ computedState }}</h1>
    <h1>使用computed接收Getters:{{ computedGetters }}</h1>
  </div>
</template>
<script>
  import { mapState,mapGetters } from 'vuex'  //引入mapState,mapGetters對(duì)象
  export default {
    name: 'ComputeShow',
    computed:{
    ...mapState({
      computedState:'count'  //別名：computedState
    }),
    ...mapGetters({
      computedGetters:'getChangeValue' //別名：computedGetters
    })
    }
  }
</script>
<style>
</style>

建議使用map時(shí)，增加別名，這樣就和stores里面內(nèi)容脫耦。在CountChange使用了mapMutations和mapActions兩個(gè)輔助函數(shù)，代碼如下

<template>
  <div align="center">
    <input type="number" v-model="paramValue" />
    <button @click="addNum({res: parseInt(paramValue)})">+增加</button>
    <button @click="subNum">-減少</button>
  </div>
</template>
<script>
  import {
    mapMutations,
    mapActions
  } from 'vuex' //引入mapMutations、mapActions對(duì)象
  export default {
    name: 'CountChange',
    data() {
      return {
        paramValue: 1,
      }
    },
    methods: {
      ...mapMutations({
        subNum: 'sub'  //增加別名subNum
      }),
      ...mapActions({
        addNum: 'increment' //映射 this.incrementN() 為 this.$store.dispatch('incrementN')
      })
    }
  }
</script>
<style>
</style>

同樣給stores中的方法制定別名，當(dāng)需要傳參數(shù)時(shí)，通過(guò)別名將參數(shù)傳遞給actions或mutations。如："addNum({res: parseInt(paramValue)})"中傳送了一個(gè)對(duì)象{res：‘'}