Vue3实现下拉框选中值无刷新调用API获取数据方案

1. 重构API服务方法 #

首先修改api.service中的getProduct方法，改为接收店铺ID参数，消除对未定义外部变量的依赖，简化逻辑：

async getProduct(shopId) {
  // 未传ID时默认用1作为兜底值
  const targetId = shopId || 1;
  return axios.get(`${API_URL}/product/all?id=${targetId}`, { headers: authHeader() })
    .then(res => res.data);
}

2. 调整Topbar组件逻辑 #

修改topbar.vue代码，实现下拉框变更时立即调用接口，并完善初始化逻辑：

<script setup>
import { ref, onMounted } from 'vue';
import { useLayout } from '@/layout/composables/layout';
import ApiService from '../services/api.service';

const { layoutConfig, onMenuToggle, contextPath } = useLayout();
const topbarMenuActive = ref(false);

// 改为响应式数组存储店铺选项，保证下拉框能实时更新
const items = ref([]);
const dropdownItem = ref(null);
// 用于存储当前选中店铺的产品数据（按需使用）
const products = ref([]);

onMounted(async () => {
  // 获取店铺列表并填充选项
  const storeData = await ApiService.getStores();
  storeData.forEach(value => {
    items.value.push({ name: value.shop, value: value.id });
  });

  // 初始化时读取本地存储的历史选中ID，自动加载对应产品
  const savedShopId = localStorage.getItem('shop-id');
  if (savedShopId) {
    dropdownItem.value = savedShopId;
    products.value = await ApiService.getProduct(savedShopId);
  }
});

const onSelectChange = async () => {
  const selectedShopId = dropdownItem.value;
  localStorage.setItem('shop-id', selectedShopId);
  
  // 立即调用接口获取对应产品数据
  try {
    products.value = await ApiService.getProduct(selectedShopId);
    // 如果需要把数据传递给父组件/其他组件，可添加emit事件
    // 示例：const emit = defineEmits(['productUpdated']); emit('productUpdated', products.value);
  } catch (err) {
    console.error('加载产品数据失败:', err);
  }
}
</script>

<Dropdown id="state" v-model="dropdownItem" :options="items" :filter="true" 
          optionLabel="name" optionValue="value" @change="onSelectChange"></Dropdown>

关键修改说明 #

• 将店铺选项数组改为ref响应式变量，确保店铺列表加载后下拉框自动更新
• 在onSelectChange中直接调用getProduct并传入选中的店铺ID，实现无刷新更新数据
• 初始化时读取本地存储的历史选中ID，自动加载对应产品，提升用户体验
• 新增错误捕获，避免接口调用失败导致页面异常

跨组件数据共享（可选） #

如果产品数据需要在多个组件中使用，推荐使用Pinia状态管理：

1. 创建产品状态Store，封装products数据和fetchProducts方法
2. 在onSelectChange中调用Store的fetchProducts方法更新全局数据
3. 其他组件直接从Store读取products即可实现实时同步

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