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

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>
复制代码

一、[Vuex系列] - 初尝Vuex第一个例子

二、[Vuex系列] - 细说state的几种用法

三、[Vuex系列] - Mutation的具体用法

四、[Vuex系列] - getters的用法

五、[Vuex系列] - Actions的理解之我见

六、[Vuex系列] - Module的用法（终篇）

转载于:https://juejin.im/post/5cc07c99f265da03a1582e14