vue3 封装一个useDict 结合本地加请求接口

在Vue3中，封装一个名为`useDict`的自定义hook，结合本地存储（如localStorage）和网络请求，可以帮助你在应用中管理字典数据，提供统一的获取、设置以及刷新机制。下面是一个简单的示例：

import { useStore } from 'vue3';
import axios from 'axios';

// 创建一个响应式的dict状态变量
const localKey = 'myDictionary'; // 根据需要定义本地存储的键

export const useDict = (initialData = {}) => {
  // 初始化从本地存储加载数据，如果不存在则默认为初始数据
  const dict = useStore(() => {
    const storedDict = localStorage.getItem(localKey) || initialData;
    return typeof storedDict === 'object' ? storedDict : {};
  }, [localKey]);

  // 请求更新函数，用于从API获取最新数据并替换当前值
  const fetchData = async () => {
    try {
      const response = await axios.get('yourApiUrl'); // 替换为实际的API地址
      dict.value = response.data; // 更新字典数据
      localStorage.setItem(localKey, JSON.stringify(dict.value)); // 存储到本地
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  // 使用返回的对象，包含当前字典数据和fetchData方法
  return {
    dict,
    updateFromServer: fetchData,
  };
};

// 在组件中使用这个hook
setup() {
  const { dict, updateFromServer } = useDict();
  
  onMounted(() => {
    // 初始加载数据
    updateFromServer();
  });

  // 当字典数据有变化时，自动保存到本地
  watch(() => dict, () => localStorage.setItem(localKey, JSON.stringify(dict)));

  // ...然后你可以像操作普通的数据一样使用dict
  return { dict };
}