Vuex 神奇的辅助函数 getters,mapGetters,...mapGetters详解

2023-10-08 02:29:28

前言

Vuex 是一个状态管理工具，用于在 Vue.js 应用程序中集中管理和共享状态。在使用 Vuex 时，我们可能会遇到需要在多个组件中使用相同状态的情况。为了避免在每个组件中都定义相同的代码，我们可以使用 Vuex 的辅助函数 getters 和 mapGetters 来简化代码并提高可复用性。

Getters

Getters 是从 Vuex 的 state 中派生出一些新的状态的方法。我们可以通过在 store 的 options 对象中定义 getters 来创建 getters。例如：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => {
      return state.count * 2
    }
  }
})

现在，我们可以在组件中使用 doubleCount getter 来访问派生出的新状态：

<template>
  <div>
    Count: {{ doubleCount }}
  </div>
</template>

<script>
export default {
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  }
}
</script>

MapGetters

mapGetters 是一个辅助函数，可以帮助我们在组件中更轻松地使用 getters。我们可以通过在组件的 computed 选项中使用 mapGetters 来实现这一目的。例如：

<template>
  <div>
    Count: {{ count }}
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['count'])
  }
}
</script>