通过mixins来实现移动端检测适配

web/components/CommentItem.vue

@@ -97,7 +97,6 @@ export default {
   },
   computed: {
     ...mapGetters('user', ['user']),
-    ...mapGetters('device', ['isMobile']),
   },
   methods: {
     formatRelativeTime,

web/components/FormComment.vue

@@ -124,9 +124,6 @@ export default {
       },
     }
   },
-  computed: {
-    ...mapGetters('device', ['isMobile']),
-  },
   watch: {
     documentId: {
       handler(val) {

web/components/UserDocument.vue

@@ -148,7 +148,6 @@ export default {
   computed: {
     ...mapGetters('user', ['user']),
     ...mapGetters('category', ['categoryTrees']),
-    ...mapGetters('device', ['isMobile']),
   },
   watch: {
     '$route.query': {

web/components/UserDownload.vue

@@ -102,7 +102,6 @@ export default {
   },
   computed: {
     ...mapGetters('user', ['user']),
-    ...mapGetters('device', ['isMobile']),
   },
   methods: {
     formatDatetime,

web/components/UserDynamic.vue

@@ -64,9 +64,7 @@ export default {
       total: 0,
     }
   },
-  computed: {
-    ...mapGetters('device', ['isMobile']),
-  },
+  computed: {},
   watch: {
     '$route.query': {
       handler(val) {

web/components/UserFavorite.vue

@@ -119,7 +119,6 @@ export default {
   },
   computed: {
     ...mapGetters('user', ['user']),
-    ...mapGetters('device', ['isMobile']),
   },
   methods: {
     formatDatetime,

web/layouts/default.vue

@@ -369,6 +369,7 @@ import FormUserinfo from '~/components/FormUserinfo.vue'
 import { listFriendlink } from '~/api/friendlink'
 import { categoryToTrees, requireLogin } from '~/utils/utils'
 import { getSignedToday, signToday } from '~/api/user'
+
 export default {
   components: { UserAvatar, FormUserinfo },
   middleware: ['checkFront', 'analytic'],
@@ -407,7 +408,6 @@ export default {
     ...mapGetters('user', ['user', 'token', 'allowPages', 'permissions']),
     ...mapGetters('setting', ['settings']),
     ...mapGetters('category', ['categories']),
-    ...mapGetters('device', ['isMobile']),
   },
   async created() {
     this.loading = true
@@ -426,29 +426,17 @@ export default {
     this.categoryTrees = categoryToTrees(this.categories).filter(
       (item) => item.enable
     )
-    this.loopUpdate()
+    // this.loopUpdate()
     this.loading = false
     if (requireLogin(this.settings, this.user, this.$route, this.permissions)) {
       this.$router.push('/login')
       return
     }
   },
-  mounted() {
-    this.handleResize()
-    window.addEventListener('resize', this.handleResize)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.handleResize)
-  },
   methods: {
     ...mapActions('category', ['getCategories']),
     ...mapActions('setting', ['getSettings']),
-    ...mapActions('user', ['logout', 'getUser']),
-    ...mapActions('device', ['setDeviceWidth']),
-    handleResize() {
-      console.log('handleResize', window.innerWidth)
-      this.setDeviceWidth(window.innerWidth)
-    },
+    ...mapActions('user', ['logout', 'getUser', 'checkAndRefreshUser']),
     async showMenuDrawer() {
       this.getSignedToday()
       this.menuDrawerVisible = true
@@ -493,6 +481,7 @@ export default {
     loopUpdate() {
       clearTimeout(this.timeouter)
       this.timeouter = setTimeout(() => {
+        this.checkAndRefreshUser()
         // 更新系统配置信息
         this.getSettings()
         // 更新分类信息

web/middleware/checkFront.js

@@ -1,6 +1,6 @@
 import { requireLogin } from '~/utils/utils'
 export default function ({ store, route, redirect }) {
-  store.dispatch('user/refreshUser')
+  store.dispatch('user/checkAndRefreshUser')
   const settings = store.getters['setting/settings']
   const user = store.getters['user/user']
   const permissions = store.getters['user/permissions'] || []

web/mixins/device.js

@@ -0,0 +1,34 @@
+export default {
+  data() {
+    return {
+      isMobile: false,
+      isPad: false,
+      isPC: true,
+    }
+  },
+  mounted() {
+    this.handleScreenResize()
+    window.addEventListener('resize', this.handleScreenResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleScreenResize)
+  },
+  methods: {
+    handleScreenResize() {
+      const width = document.body.clientWidth
+      if (width < 768) {
+        this.isMobile = true
+        this.isPad = false
+        this.isPC = false
+      } else if (width < 992) {
+        this.isMobile = false
+        this.isPad = true
+        this.isPC = false
+      } else {
+        this.isMobile = false
+        this.isPad = false
+        this.isPC = true
+      }
+    },
+  },
+}

web/pages/article/index.vue

@@ -66,7 +66,6 @@ export default {
   },
   computed: {
     ...mapGetters('setting', ['settings']),
-    ...mapGetters('device', ['isMobile']),
   },
   watch: {
     $route: {

web/pages/category/_id.vue

@@ -215,7 +215,6 @@ export default {
   computed: {
     ...mapGetters('category', ['categories', 'categoryMap']),
     ...mapGetters('setting', ['settings']),
-    ...mapGetters('device', ['isMobile']),
   },
   watch: {
     filterText(val) {

web/pages/document/_id.vue

@@ -459,7 +459,6 @@ export default {
   computed: {
     ...mapGetters('category', ['categoryMap']),
     ...mapGetters('setting', ['settings']),
-    ...mapGetters('device', ['isMobile']),
   },
   created() {
     Promise.all([
@@ -498,7 +497,7 @@ export default {
   methods: {
     formatDatetime,
     formatBytes,
-    ...mapActions('user', ['getUser', 'refreshUser']),
+    ...mapActions('user', ['getUser', 'checkAndRefreshUser']),
     async getDocument() {
       const res = await getDocument({
         id: this.documentId,
@@ -662,7 +661,7 @@ export default {
       this.$refs.commentList.getComments()
     },
     async downloadDocument() {
-      await this.refreshUser()
+      await this.checkAndRefreshUser()
 
       this.downloading = true
       const res = await downloadDocument({

web/pages/index.vue

@@ -350,7 +350,6 @@ export default {
     ...mapGetters('category', ['categoryTrees']),
     ...mapGetters('user', ['user']),
     ...mapGetters('setting', ['settings']),
-    ...mapGetters('device', ['isMobile']),
   },
   async created() {
     this.carouselHeight = this.isMobile ? '250px' : '360px'

web/pages/me.vue

@@ -66,7 +66,6 @@ export default {
   computed: {
     ...mapGetters('user', ['user']),
     ...mapGetters('setting', ['settings']),
-    ...mapGetters('device', ['isMobile']),
   },
   data() {
     return {

web/pages/search.vue

@@ -285,7 +285,6 @@ export default {
     ...mapGetters('user', ['user']),
     ...mapGetters('category', ['categoryTrees']),
     ...mapGetters('setting', ['settings']),
-    ...mapGetters('device', ['isMobile']),
   },
   watch: {
     '$route.query': {

web/plugins/element-ui.js

@@ -32,5 +32,9 @@ hotkeys.filter = (e) => {
   return true
 }
 
+// mixins
+import device from '~/mixins/device'
+Vue.mixin(device)
+
 // Vue2 引入快捷键
 Vue.prototype.$hotkeys = hotkeys

web/store/index.js

@@ -4,13 +4,12 @@ import VuexPersistence from 'vuex-persist'
 import { user } from '~/store/module/user'
 import { setting } from '~/store/module/setting'
 import { category } from '~/store/module/category'
-import { device } from '~/store/module/device'
 
 Vue.use(Vuex)
 
 const vuexLocal = new VuexPersistence({
   storage: window.localStorage,
-  modules: ['user', 'category', 'setting', 'device'],
+  modules: ['user', 'category', 'setting'],
   key: 'moredoc',
 })
 
@@ -20,7 +19,6 @@ const store = () =>
       user,
       category,
       setting,
-      device,
     },
     plugins: [vuexLocal.plugin],
   })

web/store/module/device.js

@@ -1,51 +0,0 @@
-export const device = {
-  namespaced: true,
-  state: {
-    device: {
-      isMobile: false,
-      isPad: false,
-      isPC: true,
-      width: 0,
-    },
-  },
-  mutations: {
-    setDevice(state, width) {
-      state.device.width = width
-      if (width < 768) {
-        state.device.isMobile = true
-        state.device.isPad = false
-        state.device.isPC = false
-      } else if (width < 992) {
-        state.device.isMobile = false
-        state.device.isPad = true
-        state.device.isPC = false
-      } else {
-        state.device.isMobile = false
-        state.device.isPad = false
-        state.device.isPC = true
-      }
-    },
-  },
-  actions: {
-    async setDeviceWidth({ commit }, width) {
-      commit('setDevice', width)
-    },
-  },
-  getters: {
-    isMobile(state) {
-      return state.device.isMobile || window.innerWidth < 768
-    },
-    isPad(state) {
-      return (
-        state.device.isPad ||
-        (window.innerWidth < 992 && window.innerWidth >= 768)
-      )
-    },
-    isPC(state) {
-      return state.device.isPC || window.innerWidth >= 992
-    },
-    width() {
-      return state.device.width
-    },
-  },
-}

web/store/module/user.js

@@ -127,10 +127,12 @@ export const user = {
       }
       return res
     },
-    refreshUser({ commit, state }) {
+    checkAndRefreshUser({ commit, state }) {
       try {
         const moredoc = JSON.parse(localStorage.getItem('moredoc'))
-        if (!moredoc.user.token || state.token !== moredoc.user.token) {
+        if (state.token !== moredoc.user.token) {
+          // 以 localStorage 存储的信息为准
+          console.log('exec checkAndRefreshUser')
           commit('setUser', moredoc.user.user || {})
           commit('setToken', moredoc.user.token || '')
           commit('setPermissions', moredoc.user.permissions || [])