简介
在前端开发中，我们经常需要对页面中的数据进行管理，这时我们可以使用一些状态管理工具，如 Redux、Mobx 等。但是，对于一些小型应用或者简单的数据管理场景，引入 Redux 和 Mobx 可能有些过于臃肿。
而 lite-store 正是一个优秀的简化版状态管理工具，它可以帮助我们更加高效地管理页面中的数据。
安装
我们可以使用 npm 来安装 lite-store：
npm install lite-store --save
快速开始
安装完成后，我们就可以开始使用 lite-store 进行状态管理了。
以下是一个简单的例子：
-- -------------------- ---- ------- ------ - ----------- - ---- ------------- ----- ------------ - - ------ - -- ----- ----- - -------------------------- ------------------ -- - ------------------------------ --- ---------------- ----- ----------- --- -- - ------ - - ---------------- ----- ----------- --- -- - ------ - - ---------------- ----- ----------- --- -- - ------ - -
在上面的例子中，我们首先使用 createStore 函数初始化了一个 store 对象，并指定了初始的状态 initialState。
接下来，我们在 store 上注册了一个订阅函数，当 store 中的状态发生改变时，这个订阅函数就会被调用。
最后，我们使用 dispatch 函数触发了一些 action，这些 action 将会修改 store 中的状态。
在每次调用 dispatch 后，我们都会在控制台中打印出当前的 state，以供我们查看。
API
createStore
createStore(initialState: any, ...middlewares: Function[]): Store;
createStore 函数用于创建一个 store 对象，它接收初始的状态 initialState，并可以选填一些中间件函数，用于增强 dispatch 方法。
getState
store.getState(): any;
getState 方法用于获取 store 中当前的状态。
subscribe
store.subscribe(listener: Function): Function;
subscribe 方法用于订阅 store 中状态的改变，它接收一个回调函数 listener，并返回一个函数用于取消订阅。
dispatch
store.dispatch(action: any): any;
dispatch 方法用于触发一个 action，这个 action 将会被传递给中间件函数，然后再修改 store 中的状态。
replaceReducer
store.replaceReducer(nextReducer: Function): void;
replaceReducer 方法用于替换掉 store 中的 reducer 函数。它接收一个新的 reducer 函数 nextReducer，并将其赋值给 store 中的 reducer 属性。
中间件
在 redux 中，我们可以使用一些中间件进行功能增强。而 lite-store 同样也支持中间件。
以下是一个简单的 logger 中间件的例子：
const logger = store => next => action => {
console.log('dispatching', action);
let result = next(action);
console.log('next state', store.getState());
return result;
};
const store = createStore(initialState, logger);在上面的例子中，我们首先定义了一个 logger 中间件函数，并将其传递给 createStore 函数。
logger 中间件函数接收一个 store 参数，它返回一个函数，这个返回的函数又接收一个 next 参数，它返回一个函数，这个返回的函数又接收一个 action 参数。
当我们调用 dispatch 函数时，传递给它的 action 就会依次经过所有的中间件函数，最终再去修改 store 中的状态。
在 logger 中间件中，我们通过 console.log 打印出了 action 和当前的状态。
结论
通过学习本文，我们了解了一个轻量级的状态管理工具 lite-store，并学会了如何使用它进行状态管理，以及如何使用中间件进行功能增强。相信在使用 lite-store 后，我们可以更加高效地管理页面中的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be181e8991b448e5917