Question

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

据了解，除了将对象作为参数传递之外，namespaced mapState还可以使用两个参数：namespace和表示模块成员的对象名数组。喜欢这个

// 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
};

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

Answer 1

使用spread operator：

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

Answer 2

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

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
  })
},

Answer 3

您也可以像这样使用Object.assign。与您当前的解决方案类似，但更干净。

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

Answer 4

利用传播运算符访问多个模块状态值

 ...mapState('user', {
     isLoggedIn: ({ activeUser }) => !!activeUser?.id
  }),
   ...mapState('quizzes', ['getCategories'])

Answer 5

如果没有太多的名称空间，可以尝试以下方法：

    ...mapState({
      userAddresses: 'user/addresses',
      userCreditCards: 'user/creditCards'

      vendorProducts: 'vendor/products',
      vendorRatings: 'vendor/ratings',          
    })

vuex namespaced具有多个模块的mapState

5 个答案: