feat:vue-element-admin升级改造vue3

src/layout/components/Navbar.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="navbar">
-    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar"/>
 
-    <breadcrumb class="breadcrumb-container" />
+    <breadcrumb class="breadcrumb-container"/>
 
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+          <i class="el-icon-caret-bottom"/>
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <router-link to="/">
@@ -32,7 +32,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import {reactive,computed,toRefs} from "vue";
+import {useStore} from "@/store";
+import {useRoute,useRouter} from "vue-router"
 import Breadcrumb from '@/components/Breadcrumb/index.vue'
 import Hamburger from '@/components/Hamburger/index.vue'
 
@@ -41,19 +43,35 @@ export default {
     Breadcrumb,
     Hamburger
   },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'avatar'
-    ])
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
-    },
-    async logout() {
-      await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+  setup() {
+    const store = useStore()
+    const route = useRoute()
+    const router = useRouter()
+
+    const sidebar = computed(() => {
+      return store.state.app.sidebar
+    })
+    const device = computed(() => {
+      return store.state.app.device.toString()
+    })
+    const avatar = computed(() => {
+      return store.state.user.avatar
+    })
+
+    const state=reactive({
+      toggleSideBar:()=>{
+        store.dispatch('app/toggleSideBar', false)
+      },
+      logout:()=>{
+        store.dispatch('user/logout')
+        router.push(`/login?redirect=${route.fullPath}`)
+      }
+    })
+    return{
+      sidebar,
+      device,
+      avatar,
+      ...toRefs(state)
     }
   }
 }
@@ -65,7 +83,7 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 
   .hamburger-container {
     line-height: 46px;
@@ -73,7 +91,7 @@ export default {
     float: left;
     cursor: pointer;
     transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
       background: rgba(0, 0, 0, .025)