重命名 Vue mapState 状态答案

【问题标题】：Rename Vue mapState state重命名 Vue mapState 状态
【发布时间】：2021-12-10 17:15:37
【问题描述】：

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

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

【问题讨论】：

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

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

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

即使用对象而不是数组。

【讨论】：

【解决方案2】：

mapState 支持对象方式，例如：（仅 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

【讨论】：