[Vuex系列] - Vuex中的getter的用法

時間 2019-12-07

標籤 vuex 系列 getter 用法简体版

原文原文鏈接

Vuex 容許咱們在store中定義「getter」（能夠認爲是store的計算屬性）。就像計算屬性同樣，getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。vue

getters的做用

對於getters的理解主要做用是對state屬性進行計算，能夠理解相似於Vue中computed。接下來讓我經過一個例子如何使用這兩個功能的。vuex

仍是以咱們上一講的累加器爲例，在getter.js中增長getCount，內容以下：緩存

const getters = {
  getNum (state) {
    return state.num
  },
  getCount (state) {
    return state.count
  }
}

export default getters

複製代碼

在組件中如何使用bash

<template>
  <div class="getter">
    {{ count }}
    <button @click="add">ADD State</button>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  computed: {
    count () {
      return this.$store.getters.getCount
    }
  },
  methods: {
    add () {
      this.$store.commit('add')
    }
  }
}
</script>

複製代碼

this.$store調用

this.$store.getters.getCount
複製代碼

引用store來調用

import store from '@/store/store.js'

store.getters.getCount
複製代碼

mapGetters 輔助函數

<template>
  <div class="getter">
    {{ getCount }}
    <button @click="add">ADD State</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapGetters(['getCount'])
  },
  methods: {
    add () {
      this.$store.commit('add')
    }
  }
}
</script>
複製代碼