持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

前言

这一节我们对项目中使用到的通用逻辑做一下封装。除了咱们这个项目可以用，其他项目也可以复用的属于通用封装。那么就让我们开始吧。

本地存储方法封装

之前我们的数据存储到本地是通过简单的函数封装的，我们并没有封装一个通用的存储方法

const storage = {
  get: () => JSON.parse(localStorage.getItem('latest_todos') || '[]'),
  set: (value) => localStorage.setItem('latest_todos', JSON.stringify(value))
};

我们通过函数调用实现了todos数据的存储，但是这样的封装不能够迁移到其他项目上使用。为了更好地复用，我们封装一个通用的本地存储方法：

/**
 * 封装操作localstorage本地存储的方法
 */
export const storage = {
  //存储
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
  //取出数据
  get(key) {
    const value = localStorage.getItem(key);
    if (value && value != 'undefined' && value != 'null') {
      return JSON.parse(value);
    }
  },
  // 删除数据
  remove(key) {
    localStorage.removeItem(key);
  }
};

我们对本地存储的设置、获取、删除做了封装，使用的时候就可以这样了：

import { storage } from '@/utils/storage';
storage.get(KEY)
storage.set(KEY, value)

原生浏览器监听事件封装

我们的项目中使用了监听浏览器hash变化的事件，需要在onMounted中调用，在onUnmounted中销毁。如果我们的项目使用了很多浏览器监听事件，只做了监听，没有做销毁，会造成不必要的bug，或者是内存溢出(有的时候代码写多了是容易忘记的)。为了避免这种情况，我们可以简单的封装一个hook函数，来帮助我们做事件的注册和销毁的工作，提高我们的开发效率。

useEventListener.js

import { onMounted, onUnmounted } from 'vue';

export function useEventListener(event, listener) {
  // 注册
  onMounted(() => {
    window.addEventListener(event, listener);
  });
  // 销毁
  onUnmounted(() => {
    window.removeEventListener(event, listener);
  });
}

使用

import { useEventListener } from '@/hooks/useEventListener';
useEventListener('hashchange', onHashChange);

当我们的组件销毁时，hook会自动帮我们处理事件的销毁，完全没有心智负担，爽歪歪。

总结

通用逻辑封装做完了，接下来我们要做业务逻辑封装。

项目代码在GitHub，可以查阅。

vue3入门15 - 组件化 todoMvc 项目-通用封装

前言

本地存储方法封装

原生浏览器监听事件封装

总结