具有多个模块的 vuex 命名空间 mapState

Question

我肯定错过了什么。如何将 vuex mapState 与多个模块一起使用？

据了解，除了将对象作为参数传递外，命名空间 mapState 还可以采用两个参数：命名空间和表示模块成员的对象名称数组。像这样

// an imcomplete vue
export default {
   computed: mapState('user', ['addresses', 'creditCards'])
};

但是，如果我想将来自第二个命名空间的对象添加到计算中怎么办？例如这样的供应商：

 mapState('vendor', ['products', 'ratings'])

目前我正在像这样合并两个 mapState ：

 let userMapState = mapState('user', ['addresses', 'creditCards']);
let vendorMapState = mapState ('vendor', ['products', 'ratings']);
let mergedMapStates = Object.assign({}, userMapState, vendorMapState);

接着：

 // an imcomplete vue
export default {
    computed: mergedMapStates
};

它有效，但这几乎不是正确的方法。或者是吗？

原文由 LongHike 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 扩展运算符：

 computed: {
  ...mapState('user', ['addresses', 'creditCards']),
  ...mapState('vendor', ['products', 'ratings'])
}

原文由 thanksd 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是来自 vuex 文档，您可以在一个 ...mapState({}) 中完成所有操作。 文档

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},

编辑 2019

您还可以将路径传递给嵌套模块并使模块引用更清晰（感谢 @gijswijs ）

 computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},

原文由 thedanotto 发布，翻译遵循 CC BY-SA 4.0 许可协议