vue前端開發輔助函數狀態管理詳解示例

Posted on by

mapState

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

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

使用mapState可以簡化為：

import { mapState } from 'vuex'  //引入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([
      'countDouble',
      '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: 'ComputeShow',
    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輔助函數狀態管理的資料請關註WalkonNet其它相關文章！

推薦閱讀：