@Sergeyjed

Как обновить переменую в vue.js?

Написал на js дополнение, все работает пока не перейдешь по страницам и вернешься назад, т.к. страницы не перезагружаются то переменные уже изменили свое значение и страница перестает функционировать, мне нужно их вернуть в исходное значение при переходах. Как это сделать?

<script>
  var screenOne = 0, cssparal,checkMove=false,heightSvg;
  window.onload = function() {
    if(document.querySelector('.fp-enabled')) {
      heightSvg = document.body.clientHeight
      if(!isTouchDevice) {
        var mouseCoords = {
          //    x: 0,
          y: 0,
          set: function (e) {
            if (e.pageX && e.pageY) {
              //        this.x = (e.pageX * -1 / 42).toFixed(2);
              this.y = (e.pageY * -1 / 26).toFixed(2);
            } else if (e.clientX && e.clientY) {
              //        this.x = e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
              this.y = e.clientY+(document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
            } else {
              //        this.x = 0;
              this.y = 0;
            }
          }
        }
        document.onmousemove = function (e) {
          e = e || window.event;
          mouseCoords.set(e);
          cssparal = 'background-position: 0px ' + mouseCoords.y + 'px'
          document.querySelector('.section.active').style.cssText += cssparal
        }
      }
      window.addEventListener("wheel", function(e) {
        if (e.deltaY < 0) {
          // код, при прокрутке вверх
          if(screenOne == 2 || screenOne == 0)
            firstScreen()
        }
        else if(e.deltaY > 0) {
          if(screenOne == 0) {
            firstDown()
          }
          else if(screenOne == 2){
            secondDown()
          }
          // код, при прокрутке вниз
        }
      });
    }
  }
  function firstDown() {
    var elFirstScreen = ['.label-deer', '.label-decarrow', '.label-deer_txt', '.heading-h_main', '.screen-1_txt']
    var mainPageMask = document.querySelector('.main_page-1_2')
    mainPageMask.style.cssText += 'display: block';
    setTimeout(function(){mainPageMask.classList.add('show-animate-1_2'); mainPageMask.style.cssText += 'visibility: visible'; document.querySelector('.svgmask').style.cssText += 'height: ' + heightSvg},200);
//    //.show("slide", { direction: "right" }, 600).addClass('show-animate-1_2'); если нужно снизу-вверх

    for (var i = 0; i < elFirstScreen.length; i++) {document.querySelector(elFirstScreen[i]).classList.remove("animated"); document.querySelector(elFirstScreen[i]).style.cssText = 'opacity: 0;transition: 0.6s'}
    setTimeout(function() { screenOne = 2 },400);
  }

  function firstScreen() {
    var elFirstScreen = ['.label-deer', '.label-decarrow', '.label-deer_txt', '.heading-h_main', '.screen-1_txt']
    var mainPageMask = document.querySelector('.main_page-1_2')
    mainPageMask.classList.remove('show-animate-1_2'); // .hide("slide", { direction: "right" }, 400);
    for (var i = 0; i < elFirstScreen.length; i++) {document.querySelector(elFirstScreen[i]).classList.remove("animated"); document.querySelector(elFirstScreen[i]).style.cssText = 'opacity: 1;transition: 1.2s'}
    screenOne = 0;
  }
  function secondDown() {
    screenOne = 3;
  }

  export default {
    watch: {
      $route() {
        var screenOne = 0, cssparal,checkMove=false,heightSvg;
      }
    },
  data() {
    return {
      options: {
        onLeave: this.onLeave,
        scrollingSpeed: 1200,
      }
    }
  },
      methods: {
        onLeave: function(index, nextIndex, direction){
          console.log(screenOne)
          var elements = document.getElementsByClassName("section")
          if(screenOne == 0){
            return false
          }

          if(direction == 'up') {
            for (var i = 0; i < elements.length; i++) {elements[i].classList.remove("down","next","prev")}

            var upDir = nextIndex.item; upDir.classList.add("up")

            if(nextIndex.index === 0) {} else {upDir.previousElementSibling.classList.add("prev", "up")}
            upDir.nextElementSibling.classList.add("next", "up")

          } else {

            for (var i = 0; i < elements.length; i++) {elements[i].classList.remove("up","next","prev")}

            var downDir = nextIndex.item; downDir.classList.add("animate-show","down")

              downDir.previousElementSibling.classList.add("prev", "down")
            if(nextIndex.index+1 >= elements.length) {} else {downDir.nextElementSibling.classList.add("next", "down")}
          }

          var logoDeerpfarm = document.querySelector('.logo-deerpfarm'), logoProduct = "<span class='logo-deerpfarm_txt color-white'>продукция</span>"
          var jsPhoneblock = document.querySelector('.js-phone-block')

          if (nextIndex.index === 1 || nextIndex.index === 2 || nextIndex.index === 3) {
            logoDeerpfarm.classList.add('logo-deerpfarm-txt'); if(!document.querySelector('.logo-deerpfarm_txt')){logoDeerpfarm.innerHTML+=logoProduct};
           if(jsPhoneblock.classList.contains('fadeInDown')){jsPhoneblock.classList.remove('fadeInDown')}; jsPhoneblock.classList.add('animated','fadeOutUp')
            if(!isMobile){document.querySelector('.desc-deerpfarm').classList.add('animated','fadeOut')}
          }
          else {
            logoDeerpfarm.classList.remove('logo-deerpfarm-txt')
            if(document.querySelector('.logo-deerpfarm_txt')){document.querySelector('.logo-deerpfarm_txt').remove()}

            if(jsPhoneblock.classList.contains('fadeOutUp')){
              jsPhoneblock.classList.remove('fadeOutUp'); jsPhoneblock.classList.add('fadeInDown')
            }
            if(!isMobile && document.querySelector('.desc-deerpfarm').classList.contains('fadeOut')){
              document.querySelector('.desc-deerpfarm').classList.remove('fadeOut')
            }
          }

           		if (nextIndex.index == 0) {
           			setTimeout(function() { screenOne = 0 },600);
           		}

          removeClassWild(logoDeerpfarm,"bg-*");
          switch (nextIndex.index + 1) {
            case 1: case 5: logoDeerpfarm.classList.add('bg-green');break;
            case 2: logoDeerpfarm.classList.add('bg-green-2');break;
            case 3: logoDeerpfarm.classList.add('bg-grey-2');break;
            case 4: logoDeerpfarm.classList.add('bg-grey-3');break;
            case 6: logoDeerpfarm.classList.add('bg-green');document.querySelector('.desc-deerpfarm').classList.remove('fadeOut');break;
          }

          function removeClassWild (el, m) {
            let re = new RegExp('\\b' + m.replace(/\*/g, '\\S+') + '', 'g');
            el.className = Array.from(el.classList).filter(cl => !re.test(cl)).join(' ');
            return el;
          }
      }
  }
}
</script>
  • Вопрос задан
  • 130 просмотров
Пригласить эксперта
Ответы на вопрос 1
rusya_mahin_page
@rusya_mahin_page
WiRight - это все
У Вас вся логика находится в export default?
Т.е. в секциях computed + methods?

Если да, засовывайте Ваши переменные в секцию data
Там у Вас всегда будет к ним доступ

Либо еще можно Vuex заюзать
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы