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

您可以使用vuexgetters从任何存储对象获取特定属性

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

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

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

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

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