Vue(Quasar)项目中如何将某页面computed数组用作另一页面下拉框选项

由于两个页面不存在父子组件关系，Props仅支持父子组件间传值，因此无法通过Props直接实现需求，以下是两种可行的实现方案：

方案1：使用Pinia状态管理（推荐，Quasar项目默认支持集成） #

这是最稳定的跨组件/页面共享状态的方案，步骤如下：

• 第一步：创建共享状态Store
  新建src/stores/options.js文件，代码如下：

import { defineStore } from 'pinia'

export const useOptionsStore = defineStore('options', {
  state: () => ({
    sharedOptions: []
  }),
  actions: {
    setSharedOptions(val) {
      this.sharedOptions = val
    }
  }
})

• 第二步：在Page2（ListEntries）中同步计算结果到Store
  修改ListEntries的代码：

<script>
import { useOptionsStore } from 'src/stores/options'
export default {
  name: "ListEntries",
  setup(){
    const optionsStore = useOptionsStore()
    // 注意你的原computed代码存在语法错误、stage变量未定义的问题，请先修正保证optionsArray是正确的数组
    const optionsArray = computed(() => {
      // 这里写你正确的过滤逻辑，返回最终的选项数组
      return xxx.filter(...)
    })
    // 监听optionsArray变化，同步到store
    watch(optionsArray, (newVal) => {
      optionsStore.setSharedOptions(newVal)
    }, { immediate: true })
  }
}
</script>

• 第三步：在Page1（AddEntry）中使用Store中的值作为下拉选项
  修改AddEntry的代码，不需要再用props接收options：

<template>
 <form >
  <q-select
    :options="optionsStore.sharedOptions"
  />
  <q-btn label="Save" type="submit"  />
 </form>
</template>
<script>
import { useOptionsStore } from 'src/stores/options'
export default {
  name: "AddEntry",
  setup(){
    const optionsStore = useOptionsStore()
    return { optionsStore }
  }
</script>

方案2：使用Mitt事件总线（适合小型项目，不想引入状态管理的场景） #

• 第一步：安装Mitt并创建事件总线
  执行安装命令：npm install mitt
  新建src/utils/eventBus.js：

import mitt from 'mitt'
export const eventBus = mitt()

• 第二步：在Page2（ListEntries）中抛出选项数据

<script>
import { eventBus } from 'src/utils/eventBus'
export default {
  name: "ListEntries",
  setup(){
    // 修正后的正确computed逻辑
    const optionsArray = computed(() => {
      return xxx.filter(...)
    })
    // 监听变化，抛出事件
    watch(optionsArray, (newVal) => {
      eventBus.emit('updateOptions', newVal)
    }, { immediate: true })
  }
}
</script>

• 第三步：在Page1（AddEntry）中监听事件获取选项

<template>
 <form >
  <q-select
    :options="options"
  />
  <q-btn label="Save" type="submit"  />
 </form>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { eventBus } from 'src/utils/eventBus'
export default {
  name: "AddEntry",
  setup(){
    const options = ref([])
    const updateOptions = (val) => {
      options.value = val
    }
    onMounted(() => {
      eventBus.on('updateOptions', updateOptions)
    })
    onUnmounted(() => {
      eventBus.off('updateOptions', updateOptions)
    })
    return { options }
  }
}
</script>

注意：你提供的Page2中computed代码存在语法错误、stage变量未定义、返回值是函数而非数组的问题，请先修正该部分逻辑，保证optionsArray最终返回的是下拉选项需要的数组格式，否则两种方案都无法正常运行。

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