Vue3分步骤页面怎么处理数据传输？

我的问题是这个主组件怎么收集三个routerview（分组件）的数据，也不是父子组件，用mitt合适吗？
还想实现回退一步清除一步数据的效果，没有思路了。
这是效果图

这是我的html代码

<div class="entire">
    <div style="margin-top: 40px">
      <a-steps :current="current">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      a-steps>
      <div class="steps-content">
        <router-view />
      div>
      <div class="steps-action">
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev"
        >上一步
        <a-button v-if="current < steps.length - 1" type="primary" @click="next"
          >下一步
        <a-button
          v-if="current == steps.length - 1"
          type="primary"
          @click="done"
        >
          支付
        a-button>
      div>
    div>
  div>

这是js代码

const router = useRouter()
const current = ref(0)
const next = () => {
  current.value++
  router.push(steps[current.value].content)
}
const prev = () => {
  current.value--
  router.push(steps[current.value].content)
}
onMounted(()=>{
  router.push('/receive')
})
const steps = [
  {
    title: '选择收货地址',
    content: '/receive'
  },
  {
    title: '购物清单',
    content: '/goodslist'
  },
  {
    title: '选择支付',
    content: '/paycard'
  }
]

pinia
sessionStorage

vuex

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这篇文章：vue实现多页面的一些问题解决 也许有你想要的答案，你可以看看

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^