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

Posted 2023-02-22

【中文标题】具有多个模块的 vuex 命名空间 mapState

【英文标题】：vuex namespaced mapState with multiple modules

【发布时间】：2018-01-17 13:17:32

【问题描述】：

我一定错过了什么。如何将 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
;

它有效，但它几乎不是正确的方法。还是这样？

【参考方案1】：

使用spread operator：

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

【讨论】：

我将这三个点误读为文档中的省略号。我还没有习惯传播运算符。

有效！谢谢！！

是的，但是如何从组件中引用地址？

@MichealJ.Roberts 像任何其他数据一样，例如 addresses 或 <div v-for="address in addresses">

【参考方案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
  )
,

【讨论】：

文档（现在）明确指出，这种做事方式“可能会有点冗长”，因此下面解释的替代方法是“将模块命名空间字符串作为第一个参数传递给帮助器，以便使用该模块作为上下文完成所有绑定”

【参考方案3】：

如果你没有太多的命名空间，你可以试试这个：

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

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

【讨论】：

这至少不适用于 Nuxt 2.15 或更低版本

【参考方案4】：

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

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

【参考方案5】：

利用扩展运算符访问多个模块状态值

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