重命名 Vue mapState 状态

Posted 2023-02-16

【中文标题】重命名 Vue mapState 状态

【英文标题】：Rename Vue mapState state

【发布时间】：2021-12-10 17:15:37

【问题描述】：

在我的计算中，我有两个想要跟踪的“加载”状态。有没有办法使用这种语法为另一个状态添加别名？

  computed: 
    ...mapState('barcodes', ['barcodes', 'loading', 'pagination']),
    ...mapState('users', ['user', 'loading']), // add an alias for this "loading"
  

【参考方案1】：

我不确定，因为我现在无法检查。但是 AFAIK 你应该试试这个：

computed: 
    ...mapState('barcodes', barcodes:'barcodes', alias1:'loading', pagination:'pagination'),
    ...mapState('users', user:'user', alias2:'loading'), // add an alias for this "loading"
  

即使用对象而不是数组。

【参考方案2】：

ma​​pState 支持对象方式，例如：（仅 1 个字段的特定别名）

computed: 
  ...mapState('barcodes', 
    barcodesLoading: state => state.loading,
  )

或按命名空间：（如果你想将所有用户状态包装到 userData 命名空间中）

computed: 
  ...mapState(
      barcodeData: 'barcodes',
      userData: 'users'
  )

在模板上：

<div>barcodeData.loading</div>

还有一个帖子供你参考：

vuex namespaced mapState with multiple modules