Ehan Van的博客
首页
前端笔记
首页
前端笔记
  • 前端笔记

    • v-on的使用
    • 编写一个Vue递归组件
    • 非vue文件中申明的ref如何使用
    • Vue3如何在hook中执行异步函数并同步返回响应式数据
    • 如何终止forEach循环
    • 递归创建下拉树数据
    • 编写一个Vue Web Components
    • js数组toString的使用
    • vueconfig配置多page遇到的坑
    • js事件循环机制
    • React列表渲染中图片闪烁问题
    • 开发中未配置Referrer遇到的坑
    • 前端实现文件分片上传
    • 防抖函数
    • 编写一个vue插件
    • 发布订阅模式

解决思路

在hook中执行异步函数,并返回响应式数据

代码示例

import { ref, Ref } from 'vue';

import { listCountry } from '@/api/mainData/country';

type MainDataType = 'countryList' | 'areaList';

interface Methods {
  countryList: () => Promise<void>;
  areaList: () => Promise<void>;
}

export default (mainDataType: MainDataType): Ref<any[]> => {
  const result = ref<any[]>([]);

  if (!mainDataType) return result;
  // 获取国家列表
  const countryList = async () => {
    const language = useStorage('language', 'en_US');
    const languageField = language.value === 'en_US' ? 'enName' : 'zhName';
    const res = await listCountry();
    result.value = (res?.data ?? []).map((item: any) => ({
      ...item,
      key: item.id,
      label: item[languageField]
    }));
  };

  // 获取区域列表
  const areaList = async () => {};

  const methods: Methods = {
    countryList,
    areaList
  };

  methods?.[mainDataType]?.();

  return result;
};

Prev
非vue文件中申明的ref如何使用
Next
如何终止forEach循环