VUE学习笔记(十五)-退出功能

退出功能

src/views/LayoutView.vue

<template>
  <el-container class="layout-container-demo">
    <el-aside width="200px">
      <el-scrollbar>
        <div class="mb-2 logo">Vue+WEBAPI</div>
        <el-menu :default-openeds="['1', '2']" active-text-color="#ffd04b" background-color="#303133" text-color="#fff"
          router="true">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <message />
              </el-icon>店铺管理
            </template>
            <el-menu-item-group>

              <el-menu-item index="/"><el-icon>
                  <HomeFilled />
                </el-icon>首页</el-menu-item>

              <el-menu-item index="/category"><el-icon>
                  <Operation />
                </el-icon>分页管理</el-menu-item>
              <el-menu-item index="1-3"><el-icon>
                  <ShoppingCart />
                </el-icon>商品管理</el-menu-item>
            </el-menu-item-group>

          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Setting />
              </el-icon>系统设置
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1"><el-icon>
                  <Edit />
                </el-icon>修改密码</el-menu-item>
            </el-menu-item-group>

          </el-sub-menu>

        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="Logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
const store = useStore()
const router = useRouter()
const Logout = () => {
  store.dispatch("authModule/logout")
  router.push("/login");
}
</script>

<style scoped>
.logo {
  height: 50px;
  color: white;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
}

.layout-container-demo {
  height: 100vh;
}

.el-header {
  position: relative;
  background-color: white;
  color: var(--el-text-color-primary);
  box-shadow: var(--el-box-shadow-light);

}


.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: black;
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
  box-shadow: var(--el-box-shadow-light);
  margin: 10px 0px;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.el-footer {
  box-shadow: var(--el-box-shadow-light);
}
</style>