I use @vue/reactivity api implement a zustand like project

[MrWangJustToDo]

Introducing my Zustand-inspired state management framework built on top of @vue/reactivity. This framework offers a familiar and concise API for managing state in React applications, while also providing a robust type system.

Based on @vue/reactivity, my framework allows developers to effortlessly handle and share reactive state across components. Its usage closely resembles Zustand, ensuring a minimal learning curve for developers who are already familiar with that library. You can expect a similar developer experience and productivity boost.

To define state, you can leverage the reactive function provided by @vue/reactivity. This function automatically converts plain objects into reactive proxies, enabling automatic reactivity and triggering component re-renders when changes occur. This ensures a smooth and efficient reactive programming experience.

Additionally, my framework includes utility functions that simplify state management. For example, the useStore hook grants easy access to the state within components, seamlessly integrating it into your existing codebase. The framework also supports selectors, enabling the derivation of computed values from the state without sacrificing performance.

One standout feature of my framework is its comprehensive type system. With a strong emphasis on TypeScript, it guarantees type safety throughout your application. This empowers developers with better code reliability, improved editor support, and early detection of potential issues, resulting in more robust and maintainable code.

import { createStore, ref } from "reactivity-store";

// simple reactive store
const useCount = createStore(() => {
  const refValue = ref(0);

  const changeRef = (v) => (refValue.value = v);

  return { refValue, changeRef };
});

// in react component, you can use like
const { refValue, changeRef } = useCount();

const refValue = useCount(s => s.refValue);

https://www.npmjs.com/package/reactivity-store