上篇文章我們講了Vuex的使用，本來想把是想把Vuex內(nèi)容寫一塊，后來覺得那樣會(huì)太亂不利于入門的同學(xué)消化理解，Vuex的使用問題請(qǐng)看上篇，本篇只講輔助函數(shù)。

一、組件訪問state

1. 從 vuex 中導(dǎo)入 mapState 函數(shù)

import { mapState } from 'vuex'

2. 映射為當(dāng)前組件的computed計(jì)算屬性：

...mapState(['count'])

3.添加到組件

<template>
  <div>
    <h1>count值：{{count}}</h1>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

二、觸發(fā)mutations

1. 從vuex中導(dǎo)入mapMutations函數(shù)

import { mapMutations } from 'vuex'

2. 將指定的 mapMutations 函數(shù)，映射為當(dāng)前組件的methods方法

methods: {
    ...mapMutations(['add'])
}

3.在methods使用

methods: {
   ...mapMutations(['add']),
   changeEvent(){
    this.add(5);
   }
}

三、觸發(fā)actions

1. 從 vuex 中按需導(dǎo)入 mapActions 函數(shù)

import { mapActions } from 'vuex'

2. 在組件中添加代碼

<template>
  <div class="content">
    <div>當(dāng)前最新count值：{{count}}</div>
    <div>getters: {{showNum}}</div>
    <button @click="changeEvent">觸發(fā)按鈕</button>
   </div>
</template>

<script>
import { mapState,mapActions} from 'vuex';
export default {
  name: 'Content',
  methods: {
    ...mapActions(['addAsync']),
    // 調(diào)用dispatch觸發(fā)actions時(shí)攜帶參數(shù)
    changeEvent2() {
      this.addAsync(5);
    },
  },
  computed: {
    ...mapState(['count']),
  }
}
</script>

四、Getters

<template>
  <div class="content">
    <img alt="Vue logo" src="../assets/logo.png">
    <div>當(dāng)前最新count值：{{count}}</div>
    <div>getters: {{showNum}}</div>
    <button @click="changeEvent1">觸發(fā)同步按鈕</button>
    <button @click="changeEvent2">觸發(fā)異步按鈕</button>
  </div>
</template>

<script>
import { mapState,mapMutations, mapActions, mapGetters} from 'vuex';
export default {
  name: 'Content',
  methods: {
    ...mapMutations(['add']),
    ...mapActions(['addAsync']),
    changeEvent1(){
     this.add(5);
    },
    // 調(diào)用dispatch觸發(fā)actions時(shí)攜帶參數(shù)
    changeEvent2() {
      this.addAsync(5);
    },
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  }
}
</script>