Vuex中Getters的使用详解：从基础概念到源码解析

Vuex中Getters的使用详解：从基础概念到源码解析

Vuex中的Getters是一个非常重要的概念，它类似于组件中的计算属性，用于对state中的数据进行处理和过滤。本文将从Getters的基础概念出发，详细介绍其使用方法，并深入分析其源码实现。

1. 什么是Getters

在Vuex中，state用于存放数据，如果需要对数据进行处理和输出，比如数据过滤，通常可以在组件的computed属性中进行处理。但是，如果多个组件都需要使用同一个过滤后的数据，比如饼状图组件和曲线图组件，那么将这个数据处理逻辑抽离出来并共享就显得尤为重要。这就是getters存在的意义。我们可以将getters理解为store的计算属性。

2. 如何使用Getters

定义Getters

我们可以在store中定义getters，其第一个参数是state。例如：

const getters = {
  style: state => state.style
}

传递参数

定义的Getters会暴露为store.getters对象，同时也可以接受其他的getters作为第二个参数：

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

3. 使用mapGetters辅助函数

mapGetters辅助函数可以将store中的getters映射到局部计算属性中，用法与mapState类似：

import { mapGetters } from 'vuex'

computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
  ...mapGetters([
    'doneTodosCount',
    'anotherGetter',
  ])
}

// 给getter属性换名字
mapGetters({
  // 映射 this.doneCount 为 store.getters.doneTodosCount
  doneCount: 'doneTodosCount'
})

4. 源码分析

wrapGetters函数用于初始化getters，它接受3个参数：store（当前的Store实例）、moduleGetters（当前模块下所有的getters）和modulePath（对应模块的路径）：

function wrapGetters(store, moduleGetters, modulePath) {
  Object.keys(moduleGetters).forEach(getterKey => {
    const rawGetter = moduleGetters[getterKey]
    if (store._wrappedGetters[getterKey]) {
      console.error(`[vuex] duplicate getter key: ${getterKey}`)
      return
    }
    store._wrappedGetters[getterKey] = function wrappedGetter(store) {
      return rawGetter(
        getNestedState(store.state, modulePath), // local state
        store.getters, // store上所有的getters
        store.state // root state
      )
    }
  })
}

// 根据path查找state上嵌套的state
function getNestedState(state, path) {
  return path.length
    ? path.reduce((state, key) => state[key], state)
    : state
}

以上就是Vuex中Getters的全部内容，希望对大家的学习有所帮助。