Vue使用mapState引入状态时如何为同名state设置别名

要解决命名冲突的问题很简单，把mapState第二个参数的数组写法换成对象写法，用键值对的形式自定义别名即可：

• 键：你在当前组件内要用的计算属性名称（自定义别名）
• 值：对应Vuex模块内的state属性名

修改后的完整代码如下：

computed: {
  ...mapState('barcodes', ['barcodes', 'loading', 'pagination']),
  ...mapState('users', {
    user: 'user',
    // 给users模块的loading设置别名usersLoading
    usersLoading: 'loading'
  })
}

修改后你在组件内调用时，this.loading 对应barcodes模块的加载状态，this.usersLoading 对应users模块的加载状态，不会再出现命名覆盖的问题。

内容的提问来源于stack exchange，提问作者patrick_star