Vuex开启namespaced时如何合并多个mapGetters的常见场景问题咨询

Vuex的mapGetters辅助函数原生支持多场景下的传参配置，你现在分开写的多次...mapGetters解构调用，都可以合并为单次调用，具体不同场景的实现方式如下： #

场景1：一个模块开启namespaced，另一个模块未开启命名空间 #

原始拆分写法 #

...mapGetters('cart', ['quantity']),
...mapGetters({
    isLoggedIn: 'isAuthenticated'
})

合并后写法 #

直接把带命名空间的getter写成模块名/Getter名的格式，和全局getter放在同一个配置对象里即可：

...mapGetters({
  quantity: 'cart/quantity',
  isLoggedIn: 'isAuthenticated'
})

场景2：两个mapGetters均来自同一个开启namespaced的模块 #

原始拆分写法 #

...mapGetters('cart', ['quantity']),
...mapGetters('cart', ['totalSum'])

合并后写法 #

直接把同模块下的所有getter名放到同一个数组参数里即可：

...mapGetters('cart', ['quantity', 'totalSum'])

场景3：两个mapGetters来自不同的开启namespaced的模块 #

原始拆分写法 #

...mapGetters('cart', ['quantity']),
...mapGetters('prods', ['products'])

合并后写法 #

两种方案可选：

1. 别名调用（推荐，调用时属性名更简洁）

...mapGetters({
  quantity: 'cart/quantity',
  products: 'prods/products'
})

2. 无别名直接调用（适合不想额外配置别名的场景，调用时需要用完整路径）

...mapGetters(['cart/quantity', 'prods/products'])
// 组件内调用方式：this['cart/quantity']、this['prods/products']

内容的提问来源于stack exchange，提问作者HNG