简介
Object-store-state是一个轻量级的前端状态管理库，它提供了一种可以使react和vue组件之间实现数据共享的方法。
安装
npm install object-store-state --save
使用
初始化
import { createObjectStore } from 'object-store-state';
const objectStore = createObjectStore();获取数据
import { useObjectStore } from 'object-store-state';
const data = useObjectStore(objectStore);更改数据
import { useObjectStore } from 'object-store-state';
const [data, setData] = useObjectStore(objectStore);
setData({
key: 'value'
});订阅数据改变
import { useObjectStore } from 'object-store-state';
const [data, setData, subscribe] = useObjectStore(objectStore);
subscribe((newData, oldData) => {
console.log(`新数据: ${newData}, 旧数据: ${oldData}`);
});示例
简单使用
store.js
import { createObjectStore } from 'object-store-state';
const store = createObjectStore();
export default store;App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ---------------------
------ ----- ---- ----------
-------- ----- -
----- ------ -------- - ----------------------
----- ----------- - -- -- -
---------
----- ------
---- --
---
--
------ -
-----
--------- ----------------
-------- ---------------
------- -----------------------------------
------
--
-
------ ------- ----多个组件间共享数据
store.js
import { createObjectStore } from 'object-store-state';
const store = createObjectStore();
export default store;Component1.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ---------------------
------ ----- ---- ----------
-------- ------------ -
----- ------ -------- - ----------------------
----- ----------- - -- -- -
---------
----- ------
---- --
---
--
------ -
-----
--------- ----------------
-------- ---------------
------- -----------------------------------
------
--
-
------ ------- -----------Component2.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ---------------------
------ ----- ---- ----------
-------- ------------ -
----- ------ - ----------------------
------ -
-----
--------- ----------------
-------- ---------------
------
--
-
------ ------- -----------App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- ---------------
------ ---------- ---- ---------------
-------- ----- -
------ -
-----
----------- --
----------- --
------
--
-
------ ------- ----结语
Object-store-state是一个轻量级、易用易学的前端状态管理库，为前端开发带来一种全新的数据共享方式。在开发过程中，我们可以通过它来快速解决各类状态管理问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d0981e8991b448da9dc