<script> import Aside from "@/components/Aside"; import Header from "@/components/Header"; export default { name: 'Home', data() { return { collapseBtnClass: 'el-icon-s-fold', isCollapse: false, sideWidth: 200, logoTextShow: true, user: {} } }, components: { Aside, Header }, created() { // 从后台获取最新的User数据 this.getUser() }, methods: { collapse() { // 点击收缩按钮触发 this.isCollapse = !this.isCollapse if (this.isCollapse) { // 收缩 this.sideWidth = 64 this.collapseBtnClass = 'el-icon-s-unfold' this.logoTextShow = false } else { // 展开 this.sideWidth = 200 this.collapseBtnClass = 'el-icon-s-fold' this.logoTextShow = true } }, getUser() { let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : "" if (username) { // 从后台获取User数据 this.request.get("/user/username/" + username).then(res => { // 重新赋值后台的最新User数据 this.user = res.data }) } } } } </script>

这是一个 Vue.js 组件的代码，它包含一个名为 Home 的组件。该组件引入了两个子组件 Aside 和 Header，用于构建页面的侧边栏和头部。该组件的 data 属性中包含了一些状态，如是否折叠侧边栏、侧边栏的宽度、是否显示 Logo 文字等。组件的 created 方法中调用了 getUser 方法，用于从后台获取最新的用户数据。组件的 methods 属性中定义了 collapse 和 getUser 两个方法，分别用于处理侧边栏的展开和收缩以及获取用户数据。