vue3本地存储怎末封装

在Vue3中，我们可以利用浏览器提供的`localStorage`和`sessionStorage`进行数据的持久化存储。为了简化操作并提供更好的封装，可以创建一个自定义的Vue插件来进行本地存储的管理。以下是一个简单的封装示例：

// 存储工具封装
import { use } from 'vue';

export const useLocalStorage = () => {
  // 定义一个对象来保存键值对
  const localStorageData = {};

  // 获取本地存储的数据
  const getFromLocal = (key) => {
    return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key)) : null;
  };

  // 将数据存入本地存储
  const saveToLocal = (key, value) => {
    localStorage.setItem(key, JSON.stringify(value));
  };

  // 返回一个响应式的对象供组件使用
  const $localStorage = {
    data: () => ({
      ...localStorageData,
    }),
    getters: {
      item: (key) => getFromLocal(key),
    },
    setItem: (key, value) => saveToLocal(key, value),
  };

  // 使用use的作用域插槽将$localStorage挂载到Vue实例上
  return use($localStorage);
};

// 在需要使用的组件中导入并使用
export default {
  setup() {
    const localStorageWrapper = useLocalStorage();
    // 现在你可以像操作普通的属性一样操作localStorage了
    localStorageWrapper.setItem('username', 'John Doe');
    console.log(localStorageWrapper.item('username'));
    return {};
  },
};