uni-app + Vue3编辑页/新增页面给列表页传参

只讲「编辑页 → 列表页」这个方向 ，并且 按官方/社区推荐度 + 稳定性 + 可维护性排序。

场景假设：

列表页 A → 进入编辑页 B → 编辑完成 → 返回列表页 A，并把「编辑结果」带回去

---

✅ 推荐顺序总览（先给结论）

从上到下：越推荐、越通用、越不容易踩坑

1️⃣ uni.$emit / uni.$on（页面通信）

2️⃣ Pinia / 全局状态（业务级推荐）

3️⃣ getCurrentPages() + 页面实例调用（强关联）

4️⃣ navigateBack + URL 参数（不推荐但可用）

5️⃣ 本地缓存（storage）中转（兜底方案）

---

1️⃣ ⭐⭐⭐⭐⭐ uni.$emit / uni.$on（最推荐）

为什么排第一？

• ✅ 官方支持
• ✅ 解耦页面
• ✅ 不依赖页面栈结构
• ✅ 适合「编辑完成 → 通知列表刷新 / 更新某一项」

用法（Vue3 + uni-app）

列表页（A）

onMounted(() => {
  uni.$on('edit-success', (payload) => {
    // payload 可以是：更新后的数据 / id
    updateList(payload)
  })
})

onUnmounted(() => {
  uni.$off('edit-success')
})

编辑页（B）

const submit = () => {
  uni.$emit('edit-success', {
    id: form.id,
    data: form
  })
  uni.navigateBack()
}

适合场景

• 编辑 / 新增 / 删除
• 只关心「结果」
• 不想维护全局状态

👉 90% 编辑页 → 列表页，用这个就对了

---

2️⃣ ⭐⭐⭐⭐ Pinia（业务复杂时首选）

为什么排第二？

• ✅ Vue3 官方推荐状态管理
• ✅ 跨页面、跨组件稳定
• ❌ 对"只传一次结果"来说稍重

思路

• 列表页和编辑页 共用一个 store
• 编辑页修改 store
• 返回列表页时自动响应

store

export const useListStore = defineStore('list', {
  state: () => ({
    list: []
  }),
  actions: {
    updateItem(item) {
      const idx = this.list.findIndex(v => v.id === item.id)
      if (idx !== -1) this.list[idx] = item
    }
  }
})

编辑页

const store = useListStore()
store.updateItem(form)
uni.navigateBack()

适合场景

• 列表数据本身就是全局的
• 多页面会同时影响它
• 比如：订单、用户、商品中心

👉 业务级数据，用 Pinia，不要用事件

---

3️⃣ ⭐⭐⭐ getCurrentPages()（不推荐但可控）

本质

直接拿到上一个页面实例，调用它的方法

编辑页

const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]

// Vue3
prevPage.$vm.refreshList(form)

uni.navigateBack()

列表页

const refreshList = (data) => {
  // 更新列表
}

为什么排第三？

• ❌ 强依赖页面栈顺序
• ❌ 代码耦合高
• ❌ 页面一多就容易炸

什么时候还能用？

• 简单 demo
• 明确只有 A → B
• 不走 tabBar

---

4️⃣ ⭐⭐ navigateBack + 页面参数

方式

uni.navigateBack({
  delta: 1
})

然后在列表页：

onShow(() => {
  const pages = getCurrentPages()
  const current = pages[pages.length - 1]
  console.log(current.options)
})

问题

• ❌ 参数大小受限
• ❌ 只适合简单 flag
• ❌ 多次返回容易脏数据

👉 只适合这种：

{ needRefresh: true }

---

5️⃣ ⭐ uni.setStorage（兜底方案）

用法

// 编辑页
uni.setStorageSync('editResult', form)
uni.navigateBack()

// 列表页
onShow(() => {
  const data = uni.getStorageSync('editResult')
  if (data) {
    updateList(data)
    uni.removeStorageSync('editResult')
  }
})

为什么最后？

• ❌ 状态不可控
• ❌ 生命周期不清晰
• ❌ 容易忘记清理

👉 只在跨 tabBar / 页面链断裂时用

---

推荐选型总结（直接抄）

场景	推荐方案
普通编辑 → 返回列表	uni.$emit / $on
列表是核心业务数据	Pinia
简单一对一页面	getCurrentPages()
只通知刷新	URL 参数
跨 tab / 特殊场景	storage