上篇文章我們講了Vuex的使用，本來想把是想把Vuex內容寫一塊，後來覺得那樣會太亂不利於入門的同學消化理解，Vuex的使用問題請看上篇，本篇只講輔助函式。

一、元件訪問state

1. 從 vuex 中匯入 mapState 函式

import { mapState } from 'vuex'

2. 對映為當前元件的computed計算屬性：

...mapState(['count'])

3.新增到元件

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

<script>
import { mapState } from 'vuex'

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

二、觸發mutations

1. 從vuex中匯入mapMutations函式

import { mapMutations } from 'vuex'

2. 將指定的 mapMutations 函式，對映為當前元件的methods方法

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

3.在methods使用

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

三、觸發actions

1. 從 vuex 中按需匯入 mapActions 函式

import { mapActions } from 'vuex'
 

2. 在元件中新增程式碼

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

<script>
import { mapState,mapActions} from 'vuex';
export default {
  name: 'Content',
  methods: {
    ...mapActions(['addAsync']),
    // 呼叫dispatch觸發actions時攜帶引數
    changeEvent2() {
      this.addAsync(5);
    },
  },
  computed: {
    ...mapState(['count']),
  }
}
</script>
 

四、Getters

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

<script>
import { mapState,mapMutations, mapActions, mapGetters} from 'vuex';
export default {
  name: 'Content',
  methods: {
    ...mapMutations(['add']),
    ...mapActions(['addAsync']),
    changeEvent1(){
     this.add(5);
    },
    // 呼叫dispatch觸發actions時攜帶引數
    changeEvent2() {
      this.addAsync(5);
    },
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  }
}
</script>