深入探索Vue Getters和mapGetters的原理及使用详解

举报
繁依Fanyi 发表于 2024/10/21 13:46:46 2024/10/21
【摘要】 在Vue.js的状态管理中,Vuex是一个非常重要的工具,它帮助开发者集中管理应用的状态。Vuex的核心概念包括state、mutations、actions、getters和modules。今天,我们要深入探讨其中一个关键部分:getters,以及它的相关辅助函数mapGetters。通过详细介绍getters的原理和实现过程,希望能帮助你更好地理解和使用它们。 什么是Vue Getter...

在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(例如doneTodosdoneTodosCount)都会自动重新计算,并触发相关的视图更新。

深入理解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的世界中编程愉快!

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。