Vuex 实现不同页面间数据同步？

Question

使用VUEX如何实现更新浏览器不同关卡的内容？
如下面DEMO，如何实现在page1更新count后，page2不用刷新自动更新？

store/index.js

import { createStore } from 'vuex'
const store = createStore({
    state: {
        count: 3
    },
    mutations: {
        add(state) {
            state.count += 1
        }
    },
    getters: {
        returnCount: state => {
            return state.count;
        },
    },
})

export default store

page1

 <view @click="addCount">{{ count }}</view>
 computed: {
    count() {
      return this.$store.state.count;
    },
  },
 methods: {
    addCount() {
      store.commit("add");
    }
}

page2

<view>{{ count }}</view>
computed: {
    count() {
        return this.$store.getters.returnCount
    }
}

Answer 1

同域名下，可以用 localStorage，也可以用 service worker。

Answer 2

如果是两个窗口，靠vuex是实现不了的，有两个方案：

1. 不依赖服务端，前端使用postMessage实现窗口间通信；
   https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postM...
2. 依赖服务端，使用websocket借助服务端实现跨窗口通信。