Vuex入门之getters、mapGetters、mapGetters详解及实例引用

2024-02-04 19:03:55

Vuex 中的 getters

Vuex 允许我们在 store 中定义“getter”（可以认为是store的计算属性）。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。通俗来说，getter 类似于 Vue 中的 computed 属性，但它是专门为 Vuex 设计的。

Getter 的主要作用是提供一种从 store 中获取数据的规范方式，就像 computed 属性一样，getter 也可以避免不必要的数据更新。Getter 可以防止我们每次都需要手动去计算一个复杂的表达式，当一个 getter 的依赖项发生变化时，Vuex 会自动重新计算该 getter 的值并更新相关组件。

如何使用 getters

使用 getter 非常简单，我们只需要在 store 的 getter 对象中定义它们即可。例如：

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

在该示例中，我们定义了一个名为 doubleCount 的 getter，它返回 count 状态的计算值。我们可以通过如下方式在组件中使用它：

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

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      doubleCount: 'doubleCount'
    })
  }
}
</script>

在上述示例中，我们使用了 mapGetters 辅助函数来映射 doubleCount getter 到组件的 computed 属性。这种方式可以简化 getter 的使用，并减少样板代码的数量。

mapGetters 和 mapGetters 实例

除了 mapGetters 之外，Vuex 还提供了 mapGetters 实例方法，允许我们通过一个函数来映射多个 getter。例如：

const store = new Vuex.Store({
  state: {
    count: 0,
    todos: []
  },
  getters: {
    doubleCount: state => state.count * 2,
    todoCount: state => state.todos.length
  }
})

const getters = {
  doubleCount: state => state.count * 2,
  todoCount: state => state.todos.length
}

export default {
  computed: {
    ...mapGetters(getters)
  }
}

上述代码中，我们使用 mapGetters 实例方法来映射所有 getter，这可以进一步简化 getter 的使用。

Vuex getter 实例

在 Vuex 中，getter 不仅仅局限于简单的计算，它还可以做一些更复杂的事情，例如：

过滤数据
聚合数据
格式化数据
从服务器获取数据

例如，我们可以在 getter 中通过调用一个 API 来获取服务器上的数据：

const store = new Vuex.Store({
  state: {
    todos: []
  },
  getters: {
    allTodos: state => state.todos,
    activeTodos: state => state.todos.filter(todo => !todo.completed),
    completedTodos: state => state.todos.filter(todo => todo.completed)
  }
})

在该示例中，我们定义了三个 getter：allTodos、activeTodos 和 completedTodos。allTodos 返回所有待办事项，activeTodos 返回未完成的待办事项，completedTodos 返回已完成的待办事项。

我们可以在组件中使用这些 getter 来获取和显示待办事项列表：

<template>
  <div>
    <ul>
      <li v-for="todo in allTodos">{{ todo.title }}</li>
    </ul>
    <ul>
      <li v-for="todo in activeTodos">{{ todo.title }}</li>
    </ul>
    <ul>
      <li v-for="todo in completedTodos">{{ todo.title }}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      allTodos: 'allTodos',
      activeTodos: 'activeTodos',
      completedTodos: 'completedTodos'
    })
  }
}
</script>

store.getters

除了 mapGetters 和 mapGetters 实例之外，我们还可以通过 store.getters 对象来获取 getter 的值。例如：

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

console.log(store.getters.doubleCount) // 0

mapState、mapMutations 和 mapActions

除了 mapGetters 之外，Vuex 还提供了 mapState、mapMutations 和 mapActions 这三个辅助函数，用于映射 state、mutation 和 action。这三个函数的使用方式与 mapGetters 类似，但它们映射的是不同的对象。

mapState：用于映射 state
mapMutations：用于映射 mutation
mapActions：用于映射 action

例如，我们可以在组件中使用 mapState 来映射 state：

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

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: state => state.count
    })
  }
}
</script>