如何从 Vuex 模块中访问其他模块的 Getter？

从 Vuex 模块访问其他模块中的 Getter

导言

Vuex 是一个状态管理库，常用于 Vue.js 应用程序中。它允许应用程序各组件共享状态，并提供了一系列工具来管理状态变更。其中一个工具就是 getters，它允许你从状态中派生出新的信息。

问题

有时，你需要从一个 Vuex 模块中访问另一个模块中的 getter。例如，你可能有一个 filters 模块，它包含一个名为 activeFilters 的 getter。你要从另一个模块中访问这个 getter。

解决方案：使用 rootGetters

Vuex 提供了 rootGetters 对象，可用于从一个模块访问另一个模块中的 getter。语法如下：

rootGetters['模块名/getter名称']

其中：

• 模块名：要访问其 getter 的 Vuex 模块名称
• getter名称：要访问的 getter 名称

示例

假设我们有一个名为 filters 的 Vuex 模块，其中包含一个名为 activeFilters 的 getter。要从另一个 Vuex 模块访问该 getter，我们可以使用以下代码：

rootGetters['filters/activeFilters']

代码示例

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      activeFilters: 'filters/activeFilters' // 从 filters 模块获取 activeFilters getter
    })
  }
}

注意事项

• 确保在使用 rootGetters 之前已将 Vuex 存储实例安装在 Vue 根实例中。
• rootGetters 中只能访问其他模块的 getter，不能访问 state 或其他属性。
• getter 应始终返回一个值。如果 getter 返回 undefined 或 null，则 rootGetters 中的访问将失败。

结论

使用 rootGetters，你可以轻松地从一个 Vuex 模块访问另一个模块中的 getter。这使你能够在应用程序的不同部分共享信息，并保持代码的模块化和组织性。

常见问题解答

• 问：我可以在哪里使用 rootGetters？

  • 答：你可以在任何需要访问其他模块中 getter 的地方使用 rootGetters。

• 问：rootGetters 和 getters 有什么区别？

  • 答：getters 访问当前模块中的 getter，而 rootGetters 访问其他模块中的 getter。

• 问：我可以访问 rootGetters 中的 state 吗？

  • 答：不可以。rootGetters 中只能访问其他模块的 getter，不能访问 state。

• 问：如果 getter 返回 undefined 会怎样？

  • 答：rootGetters 中的访问将失败。

• 问：如何使用 mapGetters 获取 getter？

  • 答：你可以使用 mapGetters 辅助函数来获取 getter。语法为 mapGetters({ getter名称: '模块名/getter名称' })。