Nuxt3同级页面传数据问题：使用mitt插件无法接收数据

你的代码之所以接收不到数据，核心原因是页面跳转时机不对：在cart页面触发$emit时，checkout页面还没完成挂载，它的事件监听($on)还没注册。Mitt作为内存级事件总线，错过的事件无法回溯，自然接收不到数据。

下面给出两种可行的解决方案：

方案一：改用Pinia状态管理（推荐） #

Pinia是Nuxt3官方推荐的状态管理工具，适合跨页面/组件共享数据，比事件总线更稳定可靠。

1. 安装依赖

npm install pinia @pinia/nuxt

2. 配置Nuxt模块
   在nuxt.config.ts中添加Pinia模块：

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

3. 创建Cart Store
   新建stores/cart.js：

import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {
  state: () => ({
    itemsToCheckout: null,
  }),
  actions: {
    // 设置要传递的数据
    setItemsToCheckout(data) {
      this.itemsToCheckout = data
    },
    // 可选：用完清空数据，避免重复读取
    clearCheckoutData() {
      this.itemsToCheckout = null
    },
  },
})

4. 修改cart页面代码

import { useCartStore } from '~/stores/cart'

const cartStore = useCartStore()

const handlePassData = () => {
  // 把数据存入Store
  cartStore.setItemsToCheckout('hello')
  navigateTo('/checkout')
}

5. 修改checkout页面代码

import { useCartStore } from '~/stores/cart'

const cartStore = useCartStore()
const itemsToCheckout = ref(null)

onMounted(() => {
  // 从Store读取数据
  if (cartStore.itemsToCheckout) {
    itemsToCheckout.value = cartStore.itemsToCheckout
    console.log(itemsToCheckout.value)
    // 可选：读取后清空数据
    cartStore.clearCheckoutData()
  }
})

方案二：结合本地存储（适合简单场景） #

如果不想引入状态管理，可以先把数据存在本地存储，在checkout页面直接读取：

修改cart页面 #

const handlePassData = () => {
  // 先把数据存入sessionStorage
  sessionStorage.setItem('checkoutItems', 'hello')
  navigateTo('/checkout')
}

修改checkout页面 #

const itemsToCheckout = ref(null)

onMounted(() => {
  // 从本地存储读取数据
  const data = sessionStorage.getItem('checkoutItems')
  if (data) {
    itemsToCheckout.value = data
    console.log(data)
    // 用完删除数据，避免下次进入页面重复读取
    sessionStorage.removeItem('checkoutItems')
  }
})

内容的提问来源于stack exchange，提问作者hieunv