?? vue2-user-habit

一個(gè)零侵入、強(qiáng)擴(kuò)展性、支持本地與后端存儲(chǔ)的 Vue 2 插件，用于自動(dòng)讀取與保存用戶頁(yè)面偏好設(shè)置，如分頁(yè)、篩選、視圖配置等。

?? 為什么需要這個(gè)插件？

在開發(fā)后臺(tái)管理系統(tǒng)或復(fù)雜業(yè)務(wù)頁(yè)面時(shí)，經(jīng)常會(huì)遇到下面這些需求：

• 用戶進(jìn)入列表頁(yè)后，希望記住上次選擇的分頁(yè)大小

• 圖表面板設(shè)置后，刷新頁(yè)面也能保留視圖樣式

• 切換模塊后希望能自動(dòng)恢復(fù)偏好配置

雖然可以用 localStorage 或 API 來(lái)實(shí)現(xiàn)，但如果每個(gè)頁(yè)面都手寫一遍，既重復(fù)又容易出錯(cuò)。

于是，我封裝了這個(gè)插件 —— vue2-user-habit，目標(biāo)是：

?? 讓用戶偏好的存儲(chǔ)與讀取變得零成本！

? 插件特性

• ?? 自動(dòng)讀取 & 保存：組件掛載時(shí)自動(dòng)加載，離開頁(yè)面時(shí)自動(dòng)保存

• ?? 完全可配置：字段名、唯一標(biāo)識(shí)、上下文、節(jié)流延遲全可定制

• ?? 多種存儲(chǔ)方式：支持瀏覽器 localStorage，也支持對(duì)接后端 API

• ?? 零侵入設(shè)計(jì)：以 Vue Mixin 接入，不修改組件原有結(jié)構(gòu)

• ?? 預(yù)加載機(jī)制：支持批量加載所有偏好，提高首次訪問效率

?? 安裝方式

npm install vue2-user-habit lodash

?? 快速上手

1?? 初始化插件（使用默認(rèn)策略 localStorage）

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

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

默認(rèn)數(shù)據(jù)將存儲(chǔ)在 localStorage，如：
localStorage["vue-user-habit:user-list/tab1"] = {...}

2?? 在組件中聲明用戶偏好

export default {
  name: "UserListPage",
  __habit: {
    id: "user-list",     // 唯一 ID
    path: "tab1",         // 區(qū)分路徑（可選）
    field: "prefs",       // 綁定字段
    debounceDelay: 1000,  // 自動(dòng)保存延遲（毫秒）
    context: {
      userId: "abc123",   // 可選上下文
    },
  },
  data() {
    return {
      prefs: { pageSize: 20, filter: {} },
    };
  },
  methods: {
    onFilterChanged() {
      this.__saveHabitDebounced?.();
    },
  },
};

當(dāng)組件加載時(shí)會(huì)自動(dòng)合并偏好數(shù)據(jù)到 prefs 字段；離開頁(yè)面時(shí)自動(dòng)保存。

3?? 支持后端接口？當(dāng)然可以！

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 }>>;
}

?? 實(shí)用建議

• 偏好數(shù)據(jù)字段（如 prefs）必須初始化為對(duì)象，避免合并失敗

• 可使用 this.__habitReady 等待異步數(shù)據(jù)加載完成

• 支持手動(dòng)調(diào)用 this.__saveHabitDebounced() 保存當(dāng)前狀態(tài)

• 多頁(yè)簽、多視圖建議使用 path 區(qū)分唯一性

?? 示例：表格分頁(yè)組件

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 或參與貢獻(xiàn)：

?? GitHub - vue2-user-habit

? 總結(jié)

vue2-user-habit 是一個(gè)用于 Vue 2 的用戶偏好存儲(chǔ)解決方案，具有以下優(yōu)點(diǎn)：

• 使用簡(jiǎn)單：聲明式配置即可生效

• 靈活強(qiáng)大：支持本地與后端、支持緩存與預(yù)加載

• 易于擴(kuò)展：可自定義行為策略、適配不同業(yè)務(wù)場(chǎng)景

?? 如果你覺得這個(gè)插件對(duì)你有幫助，歡迎 點(diǎn)贊 / 收藏 / 關(guān)注我，我會(huì)持續(xù)分享更多 Vue 相關(guān)開發(fā)經(jīng)驗(yàn)。