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

  • Z时代
  • 2024-03-11
  • 分类：IT

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监听这个数据，但是不起作用，不知道有没有更好的办法。

回答：

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

以上是 Nuxt组件之间如何同步刷新？A组件一个操作，让B组件跟着刷新 的全部内容， 来源链接： utcz.com/p/937318.html

回到顶部