具有多个模块的 vuex 命名空间 mapState
vuex namespaced mapState with multiple modules
我一定是漏掉了什么。如何在多个模块中使用 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
};
它有效,但这不是正确的方法。或者是?
computed: {
...mapState('user', ['addresses', 'creditCards']),
...mapState('vendor', ['products', 'ratings'])
}
这来自 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
})
},
您也可以这样使用 Object.assign。与您当前的解决方案类似,但更简洁。
computed: Object.assign(
mapState('user', ['addresses', 'creditCards']),
mapState('vendor', ['products', 'ratings']
)
利用扩展运算符访问多个模块状态值
...mapState('user', {
isLoggedIn: ({ activeUser }) => !!activeUser?.id
}),
...mapState('quizzes', ['getCategories'])
如果你没有太多的命名空间,你可以试试这个:
...mapState({
userAddresses: 'user/addresses',
userCreditCards: 'user/creditCards'
vendorProducts: 'vendor/products',
vendorRatings: 'vendor/ratings',
})
我一定是漏掉了什么。如何在多个模块中使用 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
};
它有效,但这不是正确的方法。或者是?
computed: {
...mapState('user', ['addresses', 'creditCards']),
...mapState('vendor', ['products', 'ratings'])
}
这来自 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
})
},
您也可以这样使用 Object.assign。与您当前的解决方案类似,但更简洁。
computed: Object.assign(
mapState('user', ['addresses', 'creditCards']),
mapState('vendor', ['products', 'ratings']
)
利用扩展运算符访问多个模块状态值
...mapState('user', {
isLoggedIn: ({ activeUser }) => !!activeUser?.id
}),
...mapState('quizzes', ['getCategories'])
如果你没有太多的命名空间,你可以试试这个:
...mapState({
userAddresses: 'user/addresses',
userCreditCards: 'user/creditCards'
vendorProducts: 'vendor/products',
vendorRatings: 'vendor/ratings',
})