Блог

Во-первых, позвольте мне поделиться своим рабочим процессом. В моем приложении nuxt я пытаюсь отследить, находится ли пользователь на рабочем столе или на мобильном устройстве, определяя ширину окна пользователя. Чтобы сделать это,

Во-первых, я использую объект окна js в моем default.vue для обновления переменной высоты и ширины в моем магазине. Вот код

 //default.vue

 created() {
      if (process.browser) {
        window.addEventListener('resize', this.handleResize);
        this.handleResize(window.innerHeight, window.innerWidth);
      }
    },
}
 methods: {
      handleResize() {

        this.$store.commit('setwindowheightwidth', {
          height: window.innerHeight,
          width: window.innerWidth
        })
      },
}
 

После этого я создал плагин, чтобы сохранить мои миксины. И в миксине я заполняю свою переменную isMobile, получая значение переменной ширины из магазина.

 import Vue from "vue"

export default ({store}) => {
 // Make sure to pick a unique name for the flag
// so it won't conflict with any other mixin.
if (!Vue.__my_mixin__) {
  Vue.__my_mixin__ = true
  Vue.mixin({ 
    data: function() {
        return {
          isMobile: store.getters.windowWidth<768,
        }
      },
     
   }) // Set up your mixin then
}
}
 

Теперь я получаю эти данные в каждом своем компоненте и страницах, как и намеревался. Но когда я загружаю страницу в первый раз или обновляю страницу, значение возвращается true! Даже если фактическое значение является ложным. Но если я перейду на другую страницу, перейдя по ней, или вернусь к исходной (без обновления), я получу фактическое значение. Так что, похоже, по какой-то причине значение не обновляется при начальной загрузке ни одной из моих страниц. Обычно я устраняю такого рода проблемы, получая данные с помощью асинхронного ожидания, но не уверен, где это использовать здесь. Как я могу обновить данные миксина из исходного состояния при загрузке моей страницы?

Я думаю, что если вы используете вычисляемое свойство вместо значения данных, ваша проблема будет решена. Кроме того, вы можете установить модуль @nuxt-устройства и использовать его для определения текущего устройства на каждой странице. Если эти подходы не решили вашу проблему, просто сохраните значения в состоянии и сохраните их с помощью файлов cookie.

 import Vue from "vue"

export default ({store}) => {
 // Make sure to pick a unique name for the flag
// so it won't conflict with any other mixin.
if (!Vue.__my_mixin__) {
  Vue.__my_mixin__ = true
  Vue.mixin({ 
    computed:{
       isMobile(){
          return store.getters.windowWidth<768;
       }
     }
   }) // Set up your mixin then
}
}