什么是 @parthar/mem-store
@parthar/mem-store 是一个轻量级的内存存储库，可用于前端项目中的状态管理。它提供了简单易用的 API 以及多种不同的状态更新方式。
安装
安装 @partahar/mem-store 可以使用 npm 或 yarn：
npm install @parthar/mem-store # 或者 yarn add @parthar/mem-store
使用
使用 @parthar/mem-store 在项目中进行状态管理非常简单。首先，需要创建一个新的 store 对象：
import { createStore } from '@parthar/mem-store';
const store = createStore();可以在创建时设置初始状态：
const store = createStore({
count: 0,
text: 'Hello world',
});获取状态
使用 store.getState() 可以获取当前状态。
const state = store.getState();
console.log(state); // { count: 0, text: 'Hello world' }更新状态
使用 store.setState(newState) 可以更新当前状态。这个方法接受一个新的状态对象作为参数，会将状态合并并覆盖原有状态。
store.setState({
count: 1,
});同时，store.setState 支持函数式更新。将需要更新的状态包装在一个函数中传入 setState，这个函数会接收旧状态作为参数，返回新的状态。
store.setState((prevState) => ({
count: prevState.count + 1,
}));函数式更新的好处在于，可以安全地更新依赖于前一个状态的属性。
订阅状态变化
使用 store.subscribe(listener) 可以订阅状态变化。
const unsubscribe = store.subscribe(() => {
console.log('State updated', store.getState());
});
unsubscribe(); // 取消订阅store.subscribe 返回一个取消订阅的函数，可以通过调用它来取消订阅状态变化。
绑定到 React 组件
@parthar/mem-store 可以方便地与 React 组件集成。使用 useStore 钩子可以在组件中访问 store。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ---------------------
-------- ------------- -
----- ------- --------- - -----------
-------- ------------- -
----------
------ ----------- - --
---
-
------ -
-----
--------- -----------------
------- ----------------------------------------
------
--
-useStore 返回一个数组，第一个元素是当前状态，第二个元素是更新状态的函数。
深度合并状态
当需要使用更深的状态合并时，可以使用 store.setDeep(newPartialState) 来进行更新。
-- -------------------- ---- -------
----- ----- - -------------
----- -
----- ------
-------- -
----- ---- ------
---- --------
--
--
---
---------------
----- -
-------- -
----- ---- ---------
--
--
---store.setDeep 将使用深度合并将新的部分状态合并到旧的状态中。
示例代码
以下是一个使用 @parthar/mem-store 的简单示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ -------- - ---- ---------------------
----- ----- - -------------
------ --
---
-------- --------- -
----- ------- --------- - -----------
-------- ------------- -
-------------------- -- --
------ --------------- - --
----
-
------ -
-----
--------- -----------------
------- ----------------------------------------
------
--
-
-------- ----- -
------ -
-----
------ --------
-------- --
------
--
-
-------------------- --- ---------------------------------在这个示例中，我们创建了一个全局 store 对象，然后在 Counter 组件中使用 useStore 钩子访问它，实现了一个简单的计数器组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f74238a385564ab6861