Vue Getters和mapGetters的原理及使用示例详解

更新时间：2024年08月14日 10:14:11 作者：繁依Fanyi

Vuex的核心概念包括state、mutations、actions、getters和modules,今天,我们要深入探讨其中一个关键部分：getters,以及它的相关辅助函数mapGetters,感兴趣的朋友跟随小编一起看看吧

在Vue.js的状态管理中，Vuex是一个非常重要的工具，它帮助开发者集中管理应用的状态。Vuex的核心概念包括state、mutations、actions、getters和modules。今天，我们要深入探讨其中一个关键部分：getters，以及它的相关辅助函数mapGetters。通过详细介绍getters的原理和实现过程，希望能帮助你更好地理解和使用它们。

什么是Vue Getters？

Vuex中的getters可以被视为store的计算属性。就像Vue组件中的计算属性一样，getters的返回值会基于其依赖被缓存起来，且只有当它的依赖值发生变化时才会重新计算。这使得getters非常适合用于从store中的state派生出一些状态。

基本使用

首先，让我们看一个简单的例子：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue', done: true },
      { id: 2, text: 'Learn Vuex', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
})

在上面的代码中，我们定义了一个doneTodos的getter，它会返回所有已完成的任务。同时，我们还定义了一个doneTodosCount的getter，它依赖于doneTodos，返回已完成任务的数量。

访问Getters

你可以通过store.getters来访问getters：

store.getters.doneTodos // -> [{ id: 1, text: 'Learn Vue', done: true }]
store.getters.doneTodosCount // -> 1

在组件中使用Getters

在Vue组件中，你可以使用this.$store.getters来访问getters：

computed: {
  doneTodos () {
    return this.$store.getters.doneTodos
  }
}

这虽然工作正常，但对于多个getters的访问会显得有些冗长。为了解决这个问题，我们可以使用mapGetters辅助函数。

使用mapGetters

mapGetters是一个辅助函数，它可以帮助我们将store中的getter映射到局部计算属性。它可以极大地简化在组件中使用getters的代码量。

基本使用

首先，我们需要在组件中导入mapGetters：

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'doneTodos',
      'doneTodosCount'
    ])
  }
}

现在，我们可以直接在模板中使用这些计算属性：

<template>
  <div>
    <p>Done Todos: {{ doneTodos }}</p>
    <p>Done Todos Count: {{ doneTodosCount }}</p>
  </div>
</template>

别名

有时候，我们可能想要为映射的计算属性指定别名。这时可以使用对象形式的参数：

computed: {
  ...mapGetters({
    completedTasks: 'doneTodos',
    completedTasksCount: 'doneTodosCount'
  })
}

这样，我们就可以在模板中使用别名：

<template>
  <div>
    <p>Completed Tasks: {{ completedTasks }}</p>
    <p>Completed Tasks Count: {{ completedTasksCount }}</p>
  </div>
</template>

Getters的原理和实现

为了更深入地理解getters的工作原理，我们需要了解Vuex的内部实现。Vuex是基于Vue的响应系统构建的，因此getters的实现与Vue的计算属性有很多相似之处。

创建Getters

当我们创建一个store时，Vuex会遍历我们定义的所有getters，并为每一个getter创建一个计算属性。这些计算属性的结果会被缓存，只有当它们的依赖（即state或者其他getters）发生变化时才会重新计算。

class Store {
  constructor (options = {}) {
    // ...
    const store = this
    const { getters } = options
    this.getters = {}
    Object.keys(getters).forEach(key => {
      const fn = getters[key]
      Object.defineProperty(store.getters, key, {
        get: () => fn(store.state, store.getters)
      })
    })
    // ...
  }
}

在上面的代码中，我们可以看到Vuex通过Object.defineProperty为每一个getter定义了一个属性，这个属性的getter函数会返回计算后的结果。

响应式系统

Vuex的state是响应式的，这意味着当我们改变state中的数据时，所有依赖于这些数据的getters都会自动更新。Vuex通过Vue的Vue.observable方法将state变成响应式对象。

const state = Vue.observable({
  todos: [
    { id: 1, text: 'Learn Vue', done: true },
    { id: 2, text: 'Learn Vuex', done: false }
  ]
})

这样，当我们改变state中的todos时，所有依赖于todos的getters（例如doneTodos和doneTodosCount）都会自动重新计算，并触发相关的视图更新。

深入理解mapGetters

mapGetters是Vuex提供的一个非常有用的辅助函数，它的实现也相对简单。mapGetters的主要作用是将store中的getters映射到组件的计算属性。

mapGetters的实现

我们来看看mapGetters的实现：

export function mapGetters (getters) {
  const res = {}
  normalizeMap(getters).forEach(({ key, val }) => {
    res[key] = function mappedGetter () {
      return this.$store.getters[val]
    }
  })
  return res
}

在上面的代码中，mapGetters首先通过normalizeMap函数将传入的参数规范化为一个数组，然后遍历这个数组，为每一个getter创建一个计算属性。这些计算属性的getter函数会返回this.$store.getters中的对应值。

使用normalizeMap

normalizeMap函数的作用是将传入的参数（可以是数组或对象）规范化为一个标准的对象数组：

function normalizeMap (map) {
  if (!isValidMap(map)) {
    return []
  }
  return Array.isArray(map)
    ? map.map(key => ({ key, val: key }))
    : Object.keys(map).map(key => ({ key, val: map[key] }))
}

如果传入的是一个数组，normalizeMap会将每一个数组元素转化为一个对象，键和值相同；如果传入的是一个对象，normalizeMap会将每一个键值对转化为一个对象，键和值分别对应原对象的键和值。

Getters和mapGetters的实际应用

在实际项目中，getters和mapGetters可以帮助我们更好地组织和管理应用状态。让我们通过一个稍微复杂的例子来进一步理解它们的实际应用。

例子：Todo应用

假设我们在开发一个Todo应用，这个应用需要展示所有任务、已完成任务、未完成任务以及任务的数量。我们可以通过getters来实现这些功能。

首先，我们定义store的state和getters：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue', done: true },
      { id: 2, text: 'Learn Vuex', done: false },
      { id: 3, text: 'Build something awesome', done: false }
    ]
  },
  getters: {
    allTodos: state => state.todos,
    doneTodos: state => state.todos.filter(todo => todo.done),
    undoneTodos: state => state.todos.filter(todo => !todo.done),
    totalTodosCount: state => state.todos.length,
    doneTodosCount: (state, getters) => getters.doneTodos.length,
    undoneTodosCount: (state, getters) => getters.undoneTodos.length
  }
})

然后，在组件中使用这些getters：

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'allTodos',
      'doneTodos',
      'undoneTodos',
      'totalTodosCount',
      'doneTodosCount',
      'undoneTodosCount'
    ])
  }
}

在模板中展示任务和统计信息：

<template>
  <div>
    <h1>Todo List</h1>
    <p>Total Todos: {{ totalTodosCount }}</p>
    <p>Done Todos: {{ doneTodosCount }}</p>
    <p>Undone Todos: {{ undoneTodosCount }}</p>
    <h2>All Todos</h2>
    <ul>
      <li v-for="todo in allTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
    <h2>Done Todos</h2>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
    <h2>Undone Todos</h2>
    <ul>
      <li v-for="todo in undoneTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

通过这种方式，我们可以清晰地展示所有任务、已完成任务和未完成任务，以及相关的统计信息。而且，这些数据都是通过getters从state派生出来的，当state中的任务列表发生变化时，视图会自动更新。

优化和最佳实践

在实际开发中，除了正确使用getters和mapGetters，我们还可以采取一些优化和最佳实践来提升代码的可维护性和性能。

避免不必要的计算

虽然getters的结果会被缓存，但在设计getters时仍然要注意避免不必要的计算。例如，如果一个getter依赖于另一个getter，我们应该尽量减少重复计算。

模块化

对于大型应用，我们可以将store拆分成多个模块，每个模块都有自己的state、mutations、actions和getters。这样可以使代码更清晰，更易于管理。

const moduleA = {
  state: () => ({
    todos: []
  }),
  getters: {
    doneTodos: state => state.todos.filter(todo => todo.done)
  },
  mutations: {
    // ...
  },
  actions: {
    // ...
  }
}
const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
})

在组件中使用模块的getters：

computed: {
  ...mapGetters('a', [
    'doneTodos'
  ])
}

异步操作

虽然getters不应该包含异步操作，但我们可以在actions中进行异步操作，然后通过mutations更新state，从而触发getters的重新计算。

const store = new Vuex.Store({
  state: {
    todos: []
  },
  getters: {
    doneTodos: state => state.todos.filter(todo => todo.done)
  },
  mutations: {
    setTodos (state, todos) {
      state.todos = todos
    }
  },
  actions: {
    fetchTodos ({ commit }) {
      // 假设我们有一个API调用来获取todos
      fetchTodosFromAPI().then(todos => {
        commit('setTodos', todos)
      })
    }
  }
})

性能优化

在高性能需求的应用中，我们可以利用Vuex的插件系统来优化getters的性能。例如，我们可以编写一个插件来对getters的结果进行缓存，从而避免频繁的计算。

function createGettersCachePlugin () {
  return store => {
    const cache = {}
    store.subscribe((mutation, state) => {
      // 在每次mutation后清除缓存
      Object.keys(cache).forEach(key => delete cache[key])
    })
    store._wrappedGetters = Object.keys(store._wrappedGetters).reduce((wrappedGetters, key) => {
      const getter = store._wrappedGetters[key]
      wrappedGetters[key] = (state, getters) => {
        if (!cache[key]) {
          cache[key] = getter(state, getters)
        }
        return cache[key]
      }
      return wrappedGetters
    }, {})
  }
}
const store = new Vuex.Store({
  // ...
  plugins: [createGettersCachePlugin()]
})

这个插件在每次mutation后清除缓存，并对getters的结果进行缓存，从而减少不必要的计算。

总结

Vuex的getters和mapGetters是非常强大的工具，它们可以帮助我们从store中的state派生出新的状态，并在组件中方便地使用这些状态。在实际开发中，我们可以通过合理使用getters和mapGetters，提高代码的可维护性和性能。同时，我们还可以采用一些优化和最佳实践，使我们的应用更加健壮和高效。

希望通过本文的详细介绍，你能够对Vuex的getters和mapGetters有更深入的理解，并在实际项目中更好地应用它们。祝你在Vue.js的世界中编程愉快！

到此这篇关于Vue Getters和mapGetters的原理及使用示例详解的文章就介绍到这了,更多相关Vue Getters和mapGetters使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中的适配px2rem示例代码
这篇文章主要给大家介绍了关于vue中适配px2rem的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
详解vue移动端日期选择组件
小编给大家整理了关于vue移动端日期选择组件的知识点总结，希望能够给读者带来帮助，一起学习参考下。
2018-02-02
Vue3+Element Plus的项目搭建过程详解
这篇文章主要为大家介绍了Vue3+Element Plus的项目搭建过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
Ant Design_Form表单上传文件组件实现详解
这篇文章主要为大家介绍了Ant Design_Form表单上传文件组件实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
解决vue 更改计算属性后select选中值不更改的问题
下面小编就为大家分享一篇解决vue 更改计算属性后select选中值不更改的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue3和Vite不得不说的那些事
这篇文章主要为大家详细介绍了Vue3和Vite的那些事，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
配置vite的proxy过程以及解决post请求403问题
文章介绍了Vite项目中本地开发环境通过配置proxy代理实现跨域请求的方法,并解释了生产环境中该配置不生效的情况,通常使用nginx转发或后端配置CORS来解决,文章还指出,最终的请求地址是target加上rewrite重写的地址
2025-12-12
如何换个角度使用VUE过滤器详解
这篇文章主要给大家介绍了如何换个角度使用VUE过滤器的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用VUE具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
关于vue中的时间格式转化问题
这篇文章主要介绍了关于vue中的时间格式转化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue3页面数据加载延迟的问题分析和解决方法
在 Vue 3 的项目中,当我们使用响应式数据（如 ref 或 computed）来管理页面状态时,可能会遇到由于接口数据加载延迟,导致页面初始渲染时数据尚未获取完成的问题,本文针对此问题简单分析了原因和解决方法,需要的朋友可以参考下
2024-11-11