Vuex：从对象导入单个状态

Question

我有一个简单的商店：

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'
    }

Answer 1

您可以使用 vuex getters 从任何商店对象

中获取特定的属性

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
  })
}

Vuex：从对象导入单个状态

Vuex: importing a single state from an object

vue.js

vuex

vuejs2