Fixed sider auto close

src/App.vue

@@ -17,11 +17,21 @@
     },
     created () {
       let that = this
-      enquireScreen(isMobile => {
-        if (isMobile) {
-          that.$store.commit('app/TOGGLE_DEVICE', true)
-        } else {
-          that.$store.commit('app/TOGGLE_SIDEBAR', true)
+      enquireScreen(deviceType => {
+        console.log('deviceType', deviceType)
+        // tablet
+        if (deviceType === 0) {
+          that.$store.commit('TOGGLE_DEVICE', 'tablet')
+          that.$store.commit('CLOSE_SIDEBAR', false)
+        }
+        // mobile
+        else if (deviceType === 1) {
+          that.$store.commit('TOGGLE_DEVICE', 'mobile')
+          that.$store.commit('CLOSE_SIDEBAR', false)
+        }
+        else {
+          that.$store.commit('TOGGLE_DEVICE', 'desktop')
+          that.$store.commit('TOGGLE_SIDEBAR', true)
         }
 
       })

src/components/layout/LayoutMain.vue

 <template>
   <a-layout class="layout">
 
-    <sider-menu :menus="menus" theme="light" :collapsed="collapsed" :collapsible="true"></sider-menu>
+    <sider-menu :menus="menus" theme="light" :collapsed="!siderOpen || collapsed" :collapsible="true"></sider-menu>
 
     <a-layout>
       <!-- layout header -->
@@ -24,6 +24,7 @@
   import LayoutHeader from './LayoutHeader'
   import LayoutFooter from './LayoutFooter'
   import {asyncRouterMap} from '@/router/index'
+  import { mapState } from 'vuex'
 
   export default {
     name: "LayoutView",
@@ -41,11 +42,15 @@
     created() {
       this.menus = asyncRouterMap
     },
+    computed: {
+      ...mapState({
+        siderOpen: state => state.app.sidebar.opened
+      })
+    },
     methods: {
       toggle() {
         this.collapsed = !this.collapsed;
       },
-
     }
   }
 </script>

src/utils/device.js

 import enquireJs from 'enquire.js'
 
 const enquireScreen = function (call) {
-  const hanlder = {
+  // tablet
+  const handler = {
     match: function () {
-      call && call(true)
+      call && call(0)
     },
     unmatch: function () {
-      call && call(false)
+      call && call(-1)
     }
   }
-  enquireJs.register('only screen and (max-width: 767.99px)', hanlder)
+  // mobile
+  const handler2 = {
+    match: () => {
+      call && call(1)
+    }
+  }
+  enquireJs.register('screen and (max-width: 980.99px)', handler)
+  enquireJs.register('screen and (max-width: 767.99px)', handler2)
 }
 
 export default enquireScreen
\ No newline at end of file