嘿，我来帮你理清Vuex里mapGetters同时处理命名空间模块、全局getter以及多模块的用法！

添加全局Getter到已有的命名空间mapGetters里 #

你有两种简单的方式来混合命名空间getter和全局getter：

方法1：多次调用mapGetters

mapGetters如果不传第一个命名空间参数，默认就是全局的getter。所以你可以把命名空间的和全局的分开调用：

import { mapGetters } from 'vuex'

export default {
  computed: {
    // 处理dealfilters命名空间的getter
    ...mapGetters('dealfilters', [ 'dealCount', 'pending', 'arrival', 'nights', 'tag', 'sortOptions' ]),
    // 直接添加全局getter，不用传命名空间参数
    ...mapGetters([ 'globalUser', 'appStatus' ])
  }
}

这样组件里就能直接通过this.dealCount（命名空间的）和this.globalUser（全局的）访问对应的getter了。

方法2：使用对象形式的mapGetters

如果你想把所有getter统一在一个mapGetters里，可以用对象语法，键是你在组件里要使用的名称，值是getter的完整路径：

• 命名空间的getter：'模块名/getter名'
• 全局getter：直接写getter名称即可

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      // dealfilters模块的getter
      dealCount: 'dealfilters/dealCount',
      pending: 'dealfilters/pending',
      arrival: 'dealfilters/arrival',
      // ...其他dealfilters的getter
      // 全局getter
      globalUser: 'globalUser',
      appStatus: 'appStatus'
    })
  }
}

这种方式还能给getter起别名，比如把dealCount改成localDealCount，方便在组件里区分。

调用多个不同命名空间模块的Getter #

同样，处理多模块的getter也有两种思路：

方法1：多次调用mapGetters，每个模块一次

每个命名空间模块单独调用一次mapGetters，传对应的模块名作为第一个参数：

import { mapGetters } from 'vuex'

export default {
  computed: {
    // dealfilters模块
    ...mapGetters('dealfilters', [ 'dealCount', 'pending' ]),
    // userSettings模块
    ...mapGetters('userSettings', [ 'theme', 'language' ]),
    // cart模块
    ...mapGetters('cart', [ 'totalPrice', 'itemCount' ])
  }
}

这种写法清晰直观，每个模块的getter分组明确。

方法2：用对象形式统一管理所有模块的getter

和全局getter的对象写法类似，每个getter的值指定对应的模块路径：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      dealCount: 'dealfilters/dealCount',
      theme: 'userSettings/theme',
      totalPrice: 'cart/totalPrice',
      // 再加个全局getter也没问题
      globalUser: 'globalUser'
    })
  }
}

这种方式适合getter数量不多的场景，或者你需要给多个getter起别名的时候。

内容的提问来源于stack exchange，提问作者Stephan-v