<template>
<div class="dashboard-container">
<!-- 根据角色,切换组件 -->
<component :is="currentRole" />
</div>
</template>
<script>
import { mapGetters } from ‘vuex‘
import adminDashboard from ‘./admin‘ // 管理者组件
import editorDashboard from ‘./editor‘ // 编辑者组件
export default {
name: ‘Dashboard‘,
components: { adminDashboard, editorDashboard },
data() {
return {
currentRole: ‘adminDashboard‘
}
},
computed: {
// 在组件中引入mapGetters就是将vuex中的数据映射到组件的计算属性当中
...mapGetters([
‘roles‘
])
},
created() {
if (!this.roles.includes(‘admin‘)) {
this.currentRole = ‘editorDashboard‘
}
}
}
</script>