Nuxt组件之间如何同步刷新?A组件一个操作,让B组件跟着刷新

新手上路,请多包涵

其实要实现的业务比较简单。
假设一个页面page,里面分成A、B、C三个组件(非页面组件)。
A组件是一个签到按钮,B组件是一个现实用户积分的看板,C组件是一个显示用户近期积分变动的列表。
A组件是用客户端模式向服务器发送数据,例如:

methods: {
  sign() {
    this.$axios.$post('/sign')
  }
}

B和C组件是通过async fetch ()方法从服务器拉取数据:

data () {
    return {
      result: {}
    }
  },
  async fetch () {
    const res = await this.$axios.$get('/data', {
      params:
        {
          page_no: 1,
          page_size: 10
        }
    })
    this.result = res.data
  },
  fetchOnServer: true,

想要实现的效果是,在A组件点击签到按钮,签到成功后,B和C组件都重新从服务器拉回最新的积分以及积分列表消息。

试过在A组件存入一个数据到vuex或者cookie,然后B和C组件使用watch监听这个数据,但是不起作用,不知道有没有更好的办法。

阅读 2.2k
1 个回答

nuxt.js 只负责提供服务器渲染环境,浏览器里就是普通的 vue 应用了,你按照一般 Vue 的开发方式来处理即可。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题