Vuex：从对象导入单个状态答案

【问题标题】：Vuex: importing a single state from an objectVuex：从对象导入单个状态
【发布时间】：2021-08-17 16:03:32
【问题描述】：

我有一个简单的商店：

UsersStore.js

state() {
   return {
       users: {
          name: '',
          userHasPermissions: false,
       }
   }
}

我正在尝试使用 mapState 在我的组件中访问状态。当我像下面这样导入商店的整个 User 对象时，它可以工作：

App.vue

computed: {

    ...mapState('users', {
        myUser: 'user'
    }

但我只想导入userHasPermissions 状态，但是当我执行以下操作时，它似乎不起作用：

App.vue

computed: {

    ...mapState('users', {
        hasPerms: 'user.hasPermissions'
    }

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

您可以使用 vuex getters 从任何 store 对象中获取特定属性

state() {
   return {
       users: {
          name: '',
          userHasPermissions: false,
       }
   }
},
getters: {
  userHasPermission(state) {
    return state.users.userHasPermission || false;
  }
}

现在您可以使用 mapGetters 将 store getter 映射到您的 vue 组件

computed: {
  ...mapGetters({
    hasPerms: "userHasPermission"
  })
}

如果您想避免使用mapGetters 和getters 而使用mapState，那么您需要在mapState 中定义一个计算函数来获取所需的属性

computed: {
  ...mapState({
    hasPerms: (state) => state.users.userHasPermission
  })
}

【讨论】：

对，但它不应该需要一个吸气剂，因为它只是一个真/假的布尔值。没有任何计算使吸气剂成为必需品。
更新了我的答案。你能检查它现在是否有效。你可以使用 mapState，但你必须在你的 mapState 中定义一个计算的 getter 来获取你想要映射的所需属性

【解决方案2】：

也许是hasPerms: 'users.hasPermissions' 而不是hasPerms: 'user.hasPermissions'

【讨论】：