Vue.js: 외부 JS의 값 변경 사항 반영(단순store 모드)

.vue 파일 밖입니다.js 파일에 객체를 배치하고 속성의 값이 변경되면 Vue 구성 요소가 이 작업을 수행하는 방법을 설명합니다.SPA나 Turbolinks에서 페이지 이동을 할 때도 데이터를 유지한 상태에서 다시 사용할 수 있습니다.
한마디로 단순 스토리지 모드입니다.

사용:

윈도우 대상의 이벤트 처리(resize 또는 scroll)

Rails의 ActionCable에서 데이터 수신을 이벤트로 간주

사용자의 선택 결과를 일시적으로 저장(페이지를 다시 로드하지 않는 한)

Ajax가 얻은 데이터가 너무 아까워서 반복적으로 사용

스토리지 데이터 표시

2020-02-01 수정:store 대상에state 대상이 있는 형식으로 변경합니다.
브라우저 크기 조정 및 스크롤을 테스트하는 예입니다.
WindowSize.대상을 js에 저장하여 내보냅니다.윈도우의resize와 scroll 이벤트에서store.state 속성의 값을 변경합니다.
(Vue의created 또는 mounted에서 진행window.addEventListener, 윈도우의 이벤트 처리가 중복될 수 있기 때문에 좋지 않습니다. 신중하기 위해서입니다.)
WindowSize.js

const store = {
  state: {
    width: window.innerWidth,
    height: window.innerHeight,
    scrollX: window.pageXOffset,
    scrollY: window.pageYOffset
  }
};

window.addEventListener('resize', () => {
  store.state.width = window.innerWidth;
  store.state.height = window.innerHeight;
});

window.addEventListener('scroll', () => {
  store.state.scrollX = window.pageXOffset;
  store.state.scrollY = window.pageYOffset;
});

export default store;

.vue 파일에서 Windows Size.js 객체를 가져오고 데이터 속성 winSize를 지정합니다.브라우저의 크기와 스크롤에 따라 숫자의 표시가 달라집니다.
Home.vue

<template>
  <div>
    <div>{{winSize.width}}x{{winSize.height}}</div>
    <div>{{winSize.scrollX}},{{winSize.scrollY}}</div>
    <div style="width: 2000px; height: 1000px; background-color: #eee">
    </div>
  </div>
</template>

<script>
import WindowSize from '../states/WindowSize';

export default {
  data() {
    return {
      winSize: WindowSize.state
    };
  }
}
</script>

스토리지 데이터 변경 사항 닫기

값이 외부 대상의 속성에 부여되었을 때,watch를 사용하여 이벤트 처리와 같은 작업을 수행할 수 있습니다.다음 예는 페이지를 끝까지 스크롤하여 ref="message"의div 요소를 볼 때 표시를 바꾸는 것입니다.
watch에서 'winSize.scrollY'처럼'대상. 속성'형식의 함수 이름을 사용할 수 있습니다.
Home.vue

<template>
  <div>
    <div>{{winSize.width}}x{{winSize.height}}</div>
    <div>{{winSize.scrollX}},{{winSize.scrollY}}</div>
    <div style="width: 2000px; height: 1000px; background-color: #eee">
    </div>
    <div ref="message">{{message}}</div>
  </div>
</template>

<script>
import WindowSize, { ElementAppeared } from '../states/WindowSize';

export default {
  data() {
    return {
      winSize: WindowSize.state,
      message: 'Waiting...'
    };
  },
  watch: {
    'winSize.scrollY'() {
      if(ElementAppeared(this.$refs.message)) {
        this.message = 'Hello!';
      }
    }
  }
}
</script>

다음과 같이 컴퓨터를 통해 중계할 수도 있습니다.
Home.vue

<script>
import WindowSize, { ElementAppeared } from '../states/WindowSize';

export default {
  data() {
    return {
      winSize: WindowSize.state,
      message: 'Waiting...'
    };
  },
  computed: {
    scrollY() {
      return this.winSize.scrollY;
    }
  },
  watch: {
    scrollY() {
      if(ElementAppeared(this.$refs.message)) {
        this.message = 'Hello!';
      }
    }
  }
}
</script>

여기서 사용하는 함수 ElementAppeared는 다음과 같습니다.
WindowSize.js

export function ElementAppeared(elem) {
  if(elem) {
    let rect = elem.getBoundingClientRect();
    return (rect.top < store.state.height);
  }
  return false;
}