複数のVueインスタンス間のデータ監視

各ページにひとつずつのVueインスタンスを作成する形でシングルページアプリケーションを構成しています。

html
1<html>
2	<div id="home" class="page">
3		<div v-show="isTablet" class="contents"></div>
4		<div v-show="!isTablet" class="contents"></div>
5	</div>
6
7	<div id="user" class="page">
8	</div>
9
10	<div id="help" class="page">
11	</div>
12</html>

javascript
1memo.v = {};
2memo.v.home = new Vue({
3	el: "#home",
4	data: {
5		isTablet : false
6	},
7	methods: {
8		Resize: _.debounce(function() {
9			this.isTablet = window.innerWidth > 667;
10		},300),
11	},
12	created: function () {
13		window.addEventListener("resize", this.Resize,false);
14		this.Resize();
15	},
16	beforeDestroy: function () {
17		window.removeEventListener("resize", this.Resize,false);
18	},
19});
20memo.v.user = new Vue({
21	el: "#user",
22	data: {}
23	methods: {}
24});
25memo.v.help = new Vue({
26	el: "#help",
27	data: {}
28	methods: {}
29});

上記では省略しましたが、isTablet処理はすべてのVueインスタンスが持っています。
この重複コードを一箇所にまとめたいのですが、うまく動作してくれません。

javascript
1memo.v.all = new Vue({
2	data: {
3		isTablet : false,
4	},
5	methods: {
6		Resize: _.debounce(function() {
7			this.isTablet = window.innerWidth > 667;
8		},300),
9	},
10	created: function () {
11		window.addEventListener("resize", this.Resize,false);
12		this.Resize();
13	},
14	beforeDestroy: function () {
15		window.removeEventListener("resize", this.Resize,false);
16	},
17});
18
19memo.v.home = new Vue({
20	el: "#home",
21	data: {
22		isTablet = memo.v.all.isTablet
23	},
24	methods: {}
25});

isTablet処理専用のVueインスタンスを作り、ほかのVueインスタンスはそれを参照する形にしました。
しかし、memo.v.homeのisTablet判定がおかしいのか、 .contents部分が両方表示されたり、両方消えたりします。
どうすれば正常に動作するのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

下記の部分が文法エラーなのと、memo.v.all.isTabletはcomputedプロパティを経由して参照するようにしないとリアクティブにならないのが問題です。

js
1data: {
2  isTablet = memo.v.all.isTablet
3},

また、共有データはVueインスタンスではなくVuexやVue.observableで管理するのが一般的かなと思います。

以下、Vue.observable + Mixinでの実装例です。

js
1const state = Vue.observable({
2  isTablet: window.innerWidth > 667
3})
4
5const resizeHandler = _.debounce(() => {
6  state.isTablet = window.innerWidth > 667
7}, 300)
8
9const stateMixin = {
10  computed: {
11    isTablet() {
12      return state.isTablet
13    }
14  }
15}
16
17window.addEventListener('resize', resizeHandler, false)
18
19memo.v = {};
20memo.v.home = new Vue({
21  el: '#home',
22  mixins: [stateMixin]
23})