🚀 vue2-user-habit

一个零侵入、强扩展性、支持本地与后端存储的 Vue 2 插件，用于自动读取与保存用户页面偏好设置，如分页、筛选、视图配置等。

💡 为什么需要这个插件？

在开发后台管理系统或复杂业务页面时，经常会遇到下面这些需求：

• 用户进入列表页后，希望记住上次选择的分页大小

• 图表面板设置后，刷新页面也能保留视图样式

• 切换模块后希望能自动恢复偏好配置

虽然可以用 localStorage 或 API 来实现，但如果每个页面都手写一遍，既重复又容易出错。

于是，我封装了这个插件 —— vue2-user-habit，目标是：

👉 让用户偏好的存储与读取变得零成本！

✨ 插件特性

• 🔁 自动读取 & 保存：组件挂载时自动加载，离开页面时自动保存

• ⚙️ 完全可配置：字段名、唯一标识、上下文、节流延迟全可定制

• 💾 多种存储方式：支持浏览器 localStorage，也支持对接后端 API

• 🧩 零侵入设计：以 Vue Mixin 接入，不修改组件原有结构

• 🚀 预加载机制：支持批量加载所有偏好，提高首次访问效率

📦 安装方式

npm install vue2-user-habit lodash

🚀 快速上手

1️⃣ 初始化插件（使用默认策略 localStorage）

import Vue from "vue";
import { UserHabitManager, createHabitPlugin } from "vue2-user-habit";

const habitManager = new UserHabitManager();
Vue.use(createHabitPlugin(habitManager));

默认数据将存储在 localStorage，如：
localStorage["vue-user-habit:user-list/tab1"] = {...}

2️⃣ 在组件中声明用户偏好

export default {
  name: "UserListPage",
  __habit: {
    id: "user-list",     // 唯一 ID
    path: "tab1",         // 区分路径（可选）
    field: "prefs",       // 绑定字段
    debounceDelay: 1000,  // 自动保存延迟（毫秒）
    context: {
      userId: "abc123",   // 可选上下文
    },
  },
  data() {
    return {
      prefs: { pageSize: 20, filter: {} },
    };
  },
  methods: {
    onFilterChanged() {
      this.__saveHabitDebounced?.();
    },
  },
};

当组件加载时会自动合并偏好数据到 prefs 字段；离开页面时自动保存。

3️⃣ 支持后端接口？当然可以！

const habitManager = new UserHabitManager({
  strategies: {
    async queryOne(ctx) {
      return await api.fetchUserPrefs(ctx.tag);
    },
    async update(ctx, data) {
      return await api.updateUserPrefs(ctx.tag, data);
    },
    async create(ctx, data) {
      return await api.createUserPrefs(ctx.tag, data);
    },
    async queryAll(identity) {
      return await api.fetchAllUserPrefs(identity);
    },
  },
  cacheKey: "key", // 去重字段
});

📘 插件配置字段说明

🧠 策略接口类型（TypeScript）

interface HabitStrategy {
  queryOne: (context) => Promise<{ [cacheKey]: string; data: object }>;
  update: (context, data) => Promise<any>;
  create: (context, data) => Promise<any>;
  queryAll: (identity) => Promise<Array<{ [cacheKey]: string; data: object }>>;
}

💡 实用建议

• 偏好数据字段（如 prefs）必须初始化为对象，避免合并失败

• 可使用 this.__habitReady 等待异步数据加载完成

• 支持手动调用 this.__saveHabitDebounced() 保存当前状态

• 多页签、多视图建议使用 path 区分唯一性

📎 示例：表格分页组件

export default {
  name: "MyTable",
  __habit: {
    id: "table-module",
    path: "main",
    field: "prefs",
  },
  data() {
    return {
      prefs: { pageSize: 10 },
    };
  },
  methods: {
    onPageSizeChange(size) {
      this.prefs.pageSize = size;
      this.__saveHabitDebounced();
    },
  },
};

🔗 开源地址

欢迎 Star、提 Issue 或参与贡献：

👉 GitHub - vue2-user-habit

✅ 总结

vue2-user-habit 是一个用于 Vue 2 的用户偏好存储解决方案，具有以下优点：

• 使用简单：声明式配置即可生效

• 灵活强大：支持本地与后端、支持缓存与预加载

• 易于扩展：可自定义行为策略、适配不同业务场景

📬 如果你觉得这个插件对你有帮助，欢迎 点赞 / 收藏 / 关注我，我会持续分享更多 Vue 相关开发经验。