介绍 Origami-State-Manager (OSM)：具有最少样板的轻量级状态管理库

管理 JavaScript 应用程序中的全局状态，尤其是当您需要跨 React 和非 React 上下文访问它时，可能具有挑战性。现有的库通常涉及繁重的设置、不必要的复杂性，并且与 React 紧密耦合。但是，如果您可以通过折纸的优雅和简单来管理状态呢？输入折纸状态管理器（OSM）。

---

什么是OSM？

Origami-State-Manager (OSM)，发音为“棒极了”， 是一个轻量级状态管理库，设计简单、灵活且可扩展。受日本折纸艺术（将一张普通的纸转变成复杂的设计）的启发，OSM 使您能够以同样优雅的方式管理应用程序的全局状态。就像纸张一样，它非常轻巧，非常适合注重简单性和性能的应用程序。

---

为什么选择 OSM？

构建 OSM 的旅程始于寻找一种解决方案，该解决方案可以：

• 最小化样板文件：状态管理应该简单明了，并且需要尽可能少的设置。
• 多才多艺：在 React 和非 React 上下文中无缝工作。
• 保持轻量级：避免使用不必要的代码使您的包变得臃肿。
• 保持灵活性和可扩展性：在保持性能的同时轻松适应不同的项目需求。

如果您厌倦了过度设计的解决方案，并且想要能够正常工作的，OSM 可能是您需要的“很棒”的工具。

---

主要特点

• 最少的设置： 使用干净、直观的 API 快速定义和管理您的全局状态。
• React 和非 React 兼容性： 可以从 React 组件和纯 JavaScript 函数访问和更新状态。
• 轻量级： OSM 轻如纸，让您的应用保持快速响应。
• 持久化选项：通过简单的配置使您的状态持久化。

---

OSM 入门

准备好向您的应用添加一些 OSM 功能了吗？以下是如何开始：

1。安装库：

npm install origami-state-manager

2。创建商店：

商店是全球所有状态所在的地方。设置就像将初始状态值传递给 createStore 一样简单：

// store.ts
import { createStore } from "origami-state-manager";

const initialValues = {
  origami: 0,
  osmness: 0,
};

export const store = createStore(initialValues);

您还可以通过提供商店名称来使商店持久化：

export const store = createStore(initialValues, "myOSMness");

3。访问和更新状态：

对于 React 组件，使用 useStateListener 钩子来访问和更新状态：

import { store } from "./store";
import { useStateListener } from "origami-state-manager";

function OrigamiComponent() {
  const origami = useStateListener("origami", store);

  return (
    <button onClick={() => store["origami"].value = new Date().getSeconds()}>
      Origami Count: {origami}
    </button>
  );
}

4。非 React 函数中的访问状态：

您也可以轻松地使用 React 之外的状态：

// utils.js

function getProfile() {
  let profile = store["profile"].value;
  if (!profile) {
    store["profile"].value = {};
  }

  return store["profile"].value;
}

---

用例

OSM 非常适合以下场景：

• 您需要一个轻量级解决方案来进行简单的全局状态管理。
• 您的项目涉及必须共享全局状态的 React 和非 React 逻辑。
• 您希望避免 Redux 或 MobX 等大型库的复杂性。

---

注意：前面有一些糟糕的事情！

OSM 仍处于早期阶段，尚未在所有环境中进行全面测试。虽然它非常适合小型项目和简单的国家需求，但建议在复杂场景中使用它时保持谨慎。如果您确实遇到任何问题，请报告它们，以便图书馆能够继续改进。

---

为 OSM 做出贡献

有兴趣帮助 OSM 变得更加出色吗？欢迎贡献！查看贡献指南以开始使用。

---

保持更新

变更日志会定期更新所有新的更改和改进。

---

最后的想法

Origami-State-Manager (OSM) 旨在为全局状态管理提供一个简单而强大的解决方案，且不会造成臃肿。通过保持最少的设置和较高的性能，OSM 使您能够专注于构建功能，而不是与状态复杂性作斗争。

尝试一下，在您的项目中体验 OSM 性的新水平！

立即开始使用 OSM：npm：origami-state-manager

---

以上是介绍 Origami-State-Manager (OSM)：具有最少样板的轻量级状态管理库的详细内容。更多信息请关注PHP中文网其他相关文章！