介紹 Origami-State-Manager (OSM)：最少樣板的輕量級狀態管理庫-js教程-PHP中文網

介紹 Origami-State-Manager (OSM)：最少樣板的輕量級狀態管理庫

王林

發布： 2024-08-28 06:03:37

原創

265 人瀏覽過

Introducing Origami-State-Manager (OSM): A Lightweight State Management Library with Minimal Boilerplate

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

登入後複製