Vue3下拉框切换无需刷新页面触发API获取数据求助

1. 重构api.service.js，将请求封装为可调用函数 #

原来的代码是页面加载时直接执行一次请求，无法主动触发。改成函数后可按需调用：

// api.service.js
export const getProducts = (id) => {
  // 支持传入id参数，比直接读localStorage更灵活
  return axios.get(`${API_URL}/product/all?id=${id}`);
};

// 也可以保留从localStorage读取的版本，根据需求选择
// export const getProducts = () => {
//   const id = localStorage.getItem('id');
//   return axios.get(`${API_URL}/product/all?id=${id}`);
// };

2. 组件中添加响应式数据，在切换时触发API请求 #

在组件里新增存储产品数据的响应式变量，然后在页面初始化和下拉框切换时调用API更新数据：

// 组件脚本部分
import { ref, onMounted } from 'vue';
import { getProducts } from '@/service/api.service.js'; // 路径根据你的项目结构调整

const dropdownItems = ref([]);
const dropdownItem = ref(null);
const products = ref([]); // 新增响应式变量，存储产品数据

onMounted(() => {    
  ApiService.getStores().then((data) => {
    dropdownItems.value = data.map(value => ({ 
      name: value.shop,
      value: value.id 
    }));
    // 页面加载时，若localStorage已有id，自动请求数据
    const savedId = localStorage.getItem('id');
    if (savedId) {
      fetchProducts(savedId);
      dropdownItem.value = savedId; // 同步选中状态
    }
  });
});

// 封装请求产品数据的逻辑
const fetchProducts = (id) => {
  getProducts(id).then((response) => {
    products.value = response.data; // 假设接口返回的数据在response.data中
  }).catch((err) => {
    console.error('获取产品数据失败:', err);
  });
};

const onChange = event => {
  const selectedId = event.value;
  localStorage.setItem('id', selectedId);
  // 切换选项后立即触发API请求
  fetchProducts(selectedId);
};

3. 页面模板绑定产品数据 #

确保页面展示产品的区域绑定products变量，数据更新后页面会自动渲染：

<!-- 示例：渲染产品列表 -->
<div v-for="product in products" :key="product.id" class="product-item">
  <h3>{{ product.name }}</h3>
  <p>{{ product.description }}</p>
</div>

核心逻辑说明 #

• 把API请求封装成函数是关键，这样才能在下拉框切换时主动触发请求，而不是仅页面加载时执行一次。
• 用Vue的响应式变量存储产品数据，保证数据更新后页面自动刷新，无需手动操作DOM。
• 在onMounted中处理初始化逻辑，同时兼容页面刷新时的状态；在onChange事件中实时触发新请求，实现无刷新更新数据。

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