tags: Vue.js ItIron2020

前言

昨天我們介紹了怎麼在vue-cli專案中安裝vuex套件，同時介紹了基本的vuex store結構與state、mutations & actions之間的配合，我們今天要做的非常非常簡單，還記得我們在一開始介紹vuex的圖片中其實有四個區塊相互合作嗎?
今天就要介紹如何在你的元件中使用store內的資料與函數! 相當簡短，不用緊張:D

認識getters

在開始前我們先介紹一下vuex中另一個常用的玩意，getters。
同樣的不需要想得太複雜，就像你在vue實體中，computed之於data，在vuex中，getters之於state! 也就是某個計算過後的state值罷了!
為什麼我們會需要getters呢? 想像一下今天你state中的資料有個數字陣列，由於某種需求你在組件上使用時希望他是個排序後的陣列，你當然可以到組件時再進行一次運算，但如果今天是數十個組件都要用相同的邏輯呢? 這時候設置一個簡易的getter無疑會更為方便!
就樣是mutation一樣，getters同樣接收state作為第一個參數，以上方的例子來說，getters就可以寫為

getters: {
    sortedNumbers(state) {
      return state.numbers.sort((a, b) => a - b)
    },
},

當然，若你想用箭頭函數改寫我也沒意見，2020是個相對自由的年代?

getters: {
    sortedNumbers: (state) => state.numbers.sort((a, b) => a - b)
 },

在組件中使用state、actions & getters

當你安裝vuex後，你root的vue實體就會被掛上一個$store物件，因此在組件中你可以透過以下的方法使用store中的各種屬性

this.$store.state.numbers
this.$store.dispatch('某action')
this.$store.commit('某mutation')
this.$store.getters.sortedNumbers
以此類推

這樣寫當然沒有什麼問題，程式會如你所預想的一樣行動，不過當程式碼一多這樣的寫法就有些雜亂，還好vuex提供了幾個小幫手，讓我們在組件中使用store更加輕鬆!

認識mapState、mapActions & mapGetters

這三個方法能將我們以上的行為更加的簡化，三者的使用方法都相當類似，彼此間分別對應state、actions & getters。
在使用前我們需要在組件中從vuex引入這三個方法。

import { mapState,mapActions,mapGetters } from 'vuex'

export default {
  data() {
  
  }
}

我們先從mapstate開始吧! 假設今天在state中有numbers、user & isLoading三項屬性，你就可以利用以下的寫法取出使用。

computed: {
    ...mapState(['numbers', 'user', 'isLoading']),
    你的某些自定義computed屬性() {

    },
    你的某些自定義computed屬性() {

    },
}

利用擴展運算子將mapState展開就可以輕鬆的像使用任何你自定的computed屬性一樣，在元件輕易的使用store內的資料

<template>
  <div>
    <h1>我是 {{user}}</h1>
  </div>
</template>

mapGetters也是同樣的使用方法，一樣在computed的部分透過擴展運算子展開

computed: {
    ...mapState(['numbers', 'user', 'isLoading']),
    ...mapGetters(['sortedNumbers']),
    你的某些自定義computed屬性() {

    },
    你的某些自定義computed屬性() {

    },
}

mapActions就不用我多說了吧? 只是要記得在methods部分使用就好:D

methods: {
    ...mapActions(['addNumber']),
    你的某些自定義methods屬性() {
      
    }
},

結語

今天....有點偷懶，我知道! 抱歉抱歉，不過我們仍介紹了getters的概念，並簡單解說了一下你要如何在vue組件中使用store的資料，看到目前你可能會相當好奇，看起來跟我們之前做的簡易store似乎沒有太大的差別，似乎根本就沒有必要使用vuex! 這點你倒是說對了，尤其在專案規模很小的時候，vuex絕對不是你非用不可的東西，不管是簡易的store或是eventbus都是絕對可行的替代方案，vuex的好處只有在要處理更為複雜的請求與資料處理時才會顯得特別明顯! 這個階段你們可能真的很難體會它的強大之處，暫時先懂得怎麼操作、使用即可，未來碰到規模較大的專案時，我想你會看到這熟悉的玩意的!

此文章同步發布於個人部落格，有興趣的大大也可以來參觀一下:D