refactor: App deviceEnquire

src/App.vue

@@ -8,33 +8,17 @@
 
 <script>
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
-import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
+import { AppDeviceEnquire } from '@/utils/mixin'
 
 export default {
+  mixins: [AppDeviceEnquire],
   data () {
     return {
       locale: zhCN
     }
   },
   mounted () {
-    const { $store } = this
-    deviceEnquire(deviceType => {
-      switch (deviceType) {
-        case DEVICE_TYPE.DESKTOP:
-          $store.commit('TOGGLE_DEVICE', 'desktop')
-          $store.dispatch('setSidebar', true)
-          break
-        case DEVICE_TYPE.TABLET:
-          $store.commit('TOGGLE_DEVICE', 'tablet')
-          $store.dispatch('setSidebar', false)
-          break
-        case DEVICE_TYPE.MOBILE:
-        default:
-          $store.commit('TOGGLE_DEVICE', 'mobile')
-          $store.dispatch('setSidebar', true)
-          break
-      }
-    })
+
   }
 }
 </script>

src/utils/mixin.js

@@ -1,5 +1,5 @@
 // import Vue from 'vue'
-import { DEVICE_TYPE } from '@/utils/device'
+import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
 import { mapState } from 'vuex'
 
 // const mixinsComputed = Vue.config.optionMergeStrategies.computed
@@ -50,4 +50,24 @@ const mixinDevice = {
   }
 }
 
-export { mixin, mixinDevice }
+const AppDeviceEnquire = {
+  mounted () {
+    const { $store } = this
+    deviceEnquire(deviceType => {
+      switch (deviceType) {
+        case DEVICE_TYPE.DESKTOP:
+          $store.commit('TOGGLE_DEVICE', 'desktop')
+          break
+        case DEVICE_TYPE.TABLET:
+          $store.commit('TOGGLE_DEVICE', 'tablet')
+          break
+        case DEVICE_TYPE.MOBILE:
+        default:
+          $store.commit('TOGGLE_DEVICE', 'mobile')
+          break
+      }
+    })
+  }
+}
+
+export { mixin, AppDeviceEnquire, mixinDevice }