vue如何实现两个页面的数据同步

Question

例如有A,B两个页面,要实现A页面的数据修改时,B页面的数据也同时变化.且在同时打开两个页面的情况下

我尝试过用Vuex,然后发现修改完A页面的数据后,B页面的数据仍然没有变化.

//A.vue

<template>
<div>

{{getName}}
<button @click="changeName" value="更名">更名</button>
{{getName}}

</div>
</template>

<script>
export default {
computed:{

getName(){
  return this.$store.state.name
}

},
methods:{

changeName () {
  this.$store.state.name = 'newName'
  //this.$store.commit('updateName')
}

}
}
</script>

//B.vue
<template>
<div>

{{getName}}

</div>
</template>

<script>
export default {
computed:{

  getName(){
  return this.$store.state.name
}

}
}
</script>

//store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
state: {

name: 'oldName'

},
mutations: {

updateName (state) {
  state.name = 'newName'
}

}
})

Answer 1

这个是不是需要使用 socket.io 这种常驻的请求？定时请求，发现后端数据更新，然后去获取新数据。

Answer 2

首先说你这两个页面不可能同时打开，那就有很多种方式更新数据啊。还有vuex完全可以满足你这这个需求。麻烦贴下代码

Answer 3

Vuex的值不能这样直接修改的，建议先学习一下。需要用mutations来修改

Answer 4

我最近也遇到这个问题，我目前的解决办法是先把 vuex里单独可以判断A页面的数据修改成功的状态 重新用一个新的本地存储去存，然后在page2页面监听这个新的本地存储，如果这个新的本地存储变化了，则this.$router.go(0);自动刷新page2。