forecast/forecast-backend-vue/src/utils/performance-demo.js

/**
 * 性能优化示例 - 展示自动导入的使用
 * 这个文件展示了如何使用自动导入的API，无需手动导入
 */

// 使用自动导入的 Vue API（无需 import）
export function usePerformanceDemo() {
  // 响应式数据
  const loading = ref(false);
  const data = reactive({
    list: [],
    total: 0
  });

  // 计算属性
  const isEmpty = computed(() => data.list.length === 0);

  // 获取路由信息
  const route = useRoute();
  const router = useRouter();

  // 本地存储
  const theme = useLocalStorage('theme', 'light');
  
  // 异步操作示例
  const fetchData = async () => {
    loading.value = true;
    try {
      // 使用自动导入的 axios
      const response = await axios.get('/api/data');
      data.list = response.data.list;
      data.total = response.data.total;
      
      // 使用自动导入的 message
      message.success('数据加载成功');
    } catch (error) {
      // 使用自动导入的 notification
      notification.error({
        message: '加载失败',
        description: error.message
      });
    } finally {
      loading.value = false;
    }
  };

  // 生命周期
  onMounted(() => {
    fetchData();
  });

  return {
    loading,
    data,
    isEmpty,
    theme,
    fetchData
  };
}

// 工具函数示例
export function formatDate(date) {
  // 使用自动导入的 dayjs
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
}

// 路由导航示例
export function navigateToPage(path) {
  const router = useRouter();
  router.push(path);
}