.vueファイルの外にある.jsファイルにオブジェクトを置き、そのプロパティの値が変更されたらVueコンポーネントであれこれする方法を紹介します。SPAまたはTurbolinksでページ遷移するときは、データを保持したまま使い回すこともできます。
要するに、単純なstoreパターンです。
次のような場合に使います。
- windowオブジェクトのイベント処理（resizeやscroll）
- RailsのActionCableでのデータ受信をイベントのように扱う
- ユーザーの選択結果を一時的に（ページがリロードされない限り）保存しておく
- Ajaxで取得したデータがもったいないので使い回す
storeデータの表示
2020-02-01修正: storeオブジェクトの中にstateオブジェクトを持たせる形に変更。
ブラウザーのサイズ変更やスクロールを検出するサンプルです。
WindowSize.jsにオブジェクトstoreを置いてエクスポートします。windowのresizeとscrollイベントで、store.stateのプロパティの値を変更します。
（Vueのcreatedやmountedで window.addEventListener を行うのは、windowのイベント処理が重複する可能性があるのでよくないです、念のため。）
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ファイルでは、WindowSize.jsのオブジェクトをインポートして、dataのプロパティ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>
storeデータの変更をwatchする
外部オブジェクトのプロパティに値が代入されたときに、イベント処理のように何か行うには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>
次のようにcomputedで中継することもできます。
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;
}