目錄

• mapState
• mapGetters
• mapMutations
• mapActions
• 示例
• 小結

mapState

當一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性。不使用mapState時，獲取物件狀態，通常放在使用元件的computes屬性中，使用方式為：

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

使用mapState可以簡化為：

import { mapState } from 'x'  //引入mapState物件 
export default {
  // ...
  computed: mapState({
    // 箭頭函式可使程式碼更簡練
    count: state => state.count,})
}
或者
import { mapState } from 'vuex'  //引入mapState物件 
export default {
  // ...
  computed: mapState({
    'count',//與state名稱一致
     countAlias：'count' //countAlias是在引用元件中使用的別名
  })
}

mapGetters

mapGetters 輔助函式僅僅是將 store 中的 getters 對映到區域性計算屬性，與state類似。由計算函式程式碼簡化為；

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
  // 使用物件展開運算子將 getters 混入 computed 物件中
    ...mapGetters([
      'countDhttp://www.cppcns.comouble','CountDoubleAndDouble',//..
    ])
  }
}

mapGetters也可以使用別名。

mapMutations

使用 mapMutations 輔助函式將元件中的methods對映為store.commit呼叫，簡化後代碼為：

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 輔助函式將元件的methods對映為store.dispatch呼叫，簡化後代碼為：

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狀態管理（二）中的示例，使用輔助函式完成。在CountChange和ComputeShow兩個元件使用了輔助函式，其餘程式碼無需改動。
在ComputeShow使用了mapState，mapGetters兩個輔助函式，程式碼如下

<template>
  <div align="center" style="background-color: bisque;">
    <p>以下是使用computed直接獲取stores中的狀態資料，狀態資料發生變化時，同步重新整理</p>
    <h1>使用computed接收 state:{{ computedState }}</h1>
    <h1>使用computed接收Getters:{{ computedGetters }}</h1>
  </div>
</template>
<script>
  import { mapState,mapGetters } from 'vuex'  //引入mapState,mapGetters物件
  export default {
    name: 'Computwww.cppcns.comeShow',computed:{
    ...mapState({
      computedState:'count'  //別名：computedState
    }),...mapGetters({
      computedGetters:'getChangeValue' //別名：computedGetters
    })
    }
  }
</script>
<style>
</style>

建議使用map時，增加別名，這樣就和stores裡面內容脫耦。在CountChange使用了mapMutations和mapActions兩個輔助函式，程式碼如下

<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物件
  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中的方法制定別名，當需要傳引數時，通過別名將引數傳遞給actions或mutations。如："addNum({res: parseInt(paramValue)})"中傳送了一個物件{res：‘'}

小結

輔助函式本身沒有新的含義，主要用於簡化State、Getters、Mutations、Actions使用時的程式碼。

以上就是vue前端開發輔助函式狀態管理詳解示例的詳細內容，更多關於vue輔助函式狀態管理的資料請關注我們其它相關文章！