Vuex 允許我們在store中定義“getter”（可以認為是store的計算屬性）。就像計算屬性一樣，getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。

getters的作用

對于getters的理解主要作用是對state屬性進行計算，可以理解類似于Vue中computed。接下來讓我通過一個例子如何使用這兩個功能的。

還是以我們上一講的累加器為例，在getter.js中增加getCount，內容如下：

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

在組件中如何使用

<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>

轉載于:https://www.cnblogs.com/wangshucheng/p/vue-004.html

總結

以上是生活随笔為你收集整理的[Vuex系列] - Vuex中的getter的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。