upto-lever

一个轻量级的状态标志管理工具，支持 Vue 2 和 Vue 3，用于管理多个布尔状态。

特性

• 🚀 轻量级，零依赖
• 🔄 支持 Vue 2 和 Vue 3
• 📦 TypeScript 支持

安装

npm install upto-lever

基础用法

import { useLever } from "upto-lever";

const lever = useLever();

// 添加状态
lever.increase("button1Loading");
lever.increase("button2Loading");
lever.increase("button3Loading");

// 检查某个状态是否存在
lever.has("button1Loading"); // true

// 移除状态
lever.lessen("button1Loading");
lever.has("button1Loading"); // false

// 检查多个状态是否都存在
lever.every(["button2Loading", "button3Loading"]); // true

// 清除所有状态
lever.clear();

在 Vue 组件中使用

Vue 3

import { useLever } from "upto-lever";

const lever = useLever();

// 在组件中调用 has/every 会自动追踪实例
lever.has("loading"); // 自动绑定组件卸载清理

return { lever };

Vue 2

import { useLever } from "upto-lever";

export default {
  data() {
    return {
      lever: Object.freeze(useLever()),
    };
  },
  created() {
    // 手动绑定组件实例
    this.lever.use(this);
  },
};

<template>
  <div v-if="lever.has('loading')">loading...</div>
</template>

API

useLever(options?)

创建一个 lever 实例。

返回

interface Lever {
  increase: (key: string) => void; // 添加状态标志
  lessen: (key: string) => void; // 移除状态标志
  has: (key: string) => boolean; // 检查状态是否存在
  every: (keys: string[]) => boolean; // 检查多个状态是否都存在
  clear: () => void; // 清除所有状态
  use: (vm: any) => void; // 手动绑定组件实例（Vue 2）
}

lever.increase(key: string)

添加一个状态标志。参数必须为字符串类型。

lever.lessen(key: string)

移除一个状态标志。

lever.has(key: string): boolean

检查某个状态标志是否存在。在 Vue 3 中调用时会自动追踪当前组件实例。

lever.every(keys: string[]): boolean

检查所有指定的状态标志是否都存在。如果数组为空则返回 false。

lever.clear()

清除所有状态标志和绑定的组件实例。

lever.use(vm: any)

手动绑定组件实例，用于 Vue 2 或特殊场景。

高级用法

Loading 状态管理

const loading = useLever();

async function fetchData() {
  loading.increase("fetchUsers");
  loading.increase("fetchPosts");

  await Promise.all([fetchUsers(), fetchPosts()]);

  loading.lessen("fetchUsers");
  loading.lessen("fetchPosts");
}

// 检查是否所有数据都在加载中
if (loading.every(["fetchUsers", "fetchPosts"])) {
  showGlobalLoading();
}

权限管理

const permissions = useLever();

permissions.increase("canEdit");
permissions.increase("canDelete");

if (permissions.has("canEdit")) {
  // 执行编辑操作
}

// 检查是否有所有权限
permissions.every(["canEdit", "canDelete"]);

功能开关（Feature Flags）

const features = useLever();

features.increase("darkMode");
features.increase("betaFeature");

if (features.has("betaFeature")) {
  // 显示 beta 功能
}

表单验证状态

const validFields = useLever();

// 字段验证通过
validFields.increase("email");
validFields.increase("password");

// 检查表单是否可提交
if (validFields.every(["email", "password", "username"])) {
  submitForm();
}

弹窗/模态框状态

const modals = useLever();

modals.increase("settingsModal");

if (modals.has("settingsModal")) {
  // 阻止页面滚动等
}

modals.lessen("settingsModal");

License

ISC