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

Question

我的问题是这个主组件怎么收集三个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
        >
        <a-button v-if="current < steps.length - 1" type="primary" @click="next"
          >下一步</a-button
        >
        <a-button
          v-if="current == steps.length - 1"
          type="primary"
          @click="done"
        >
          支付
        </a-button>
      </div>
    </div>
  </div>

这是js代码

const router = useRouter()
const current = ref<number>(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'
  }
]

Answer 1

pinia
sessionStorage