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

最新推荐文章于 2025-06-19 19:49:09 发布

转载最新推荐文章于 2025-06-19 19:49:09 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangshucheng/p/vue-004.html

文章标签：

#javascript #ViewUI

本文介绍了 Vuex 中的 getters 功能，它允许开发者定义类似 Vue 中 computed 的计算属性，用于处理状态并缓存结果。文章通过一个累加器示例展示了如何在组件中使用 getters 并提供了多种调用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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