前言
随着前端框架的不断发展，越来越多的项目开始采用集成化的前端方案。这一过程中，状态管理工具不可或缺。
在 WordPress 后端领域中，已有成熟的 @wordpress/data 包，为前端提供了与 WordPress 后端交互的状态管理工具。本文将对该 npm 包进行详细教程介绍，并提供实用示例代码。
什么是 @wordpress/data？
@wordpress/data 是 WordPress 官方出品的状态管理工具，提供了灵活的状态树管理、与 REST API 交互的 data object 模型、以及数据钩子的能力。
要使用 @wordpress/data，在 WordPress 后端的主题、插件中，需要先引入该 npm 包：
import { registerStore } from '@wordpress/data';如何配置 @wordpress/data？
@wordpress/data 提供了 registerStore 方法，用于注册状态树。
-- -------------------- ---- -------
-------------- ------------ -
-------- - ----- - - ----- -- -- ------ - -- -
------ - ----------- - -
---- -----------
------ - ----- ----------- --
--------
------ ------
-
-
- --在上述代码中，我们注册了一个名为 my-plugin 的状态树，其中定义了 reducer，用于接受 action，并更新 state。
如何使用 @wordpress/data？
使用 @wordpress/data，需要先获取到 data object：
import { select } from '@wordpress/data';
const myData = select( 'my-plugin' );然后，通过 get 方法获取对应数据：
const data = myData.get( 'data' );
或者，使用 subscribe 方法，监听数据变化：
myData.subscribe( () => {
const data = myData.get( 'data' );
// ...
} );通过 dispatch 方法，可以发送 action，更新 state：
myData.dispatch( 'SET_DATA', { data: [ 1, 2, 3 ] } );@wordpress/data 还提供了类似 Vue 组件 computed 和 watch 的 computed、selectors 方法，用于处理派生状态，以及 watch 数据变化。
@wordpress/data 的优劣
相比其他状态管理工具，@wordpress/data 的主要优势在于与 WordPress 后端完美集成。可以轻松读取 REST API 数据，也可以通过类似 WordPress 插件编写的方式编写前端数据插件。此外，@wordpress/data 是标准的 npm 包，可以方便地集成于任何前端项目中。
不足之处在于学习曲线较陡峭，需要熟悉 WordPress 插件机制，以及 Redux 的基础知识。此外，@wordpress/data 的响应式机制也需要注意，需要注册对应的 selector，才能实现响应式效果。
示例代码
下面提供一个利用@wordpress/data 实现 WordPress 后端页面侧边栏数据绑定的实例代码：
-- -------------------- ---- -------
------ - --------- - ---- -------------------
------ - -------------- --------- ------ - ---- ------------------
-- -------
-------------- ---------- -
-------- - ----- - - ----- ----- ------ -- -- ------ - -- -
------ - ----------- - -
---- -----------------
------ - --------- ----- - ---------- --
---- --------------------
------ - --------- ------ ------------ --
--------
------ ------
-
--
-------- -
-------------- -- -- - - ----- ---------------- - --
---------------- ----- -- - - ----- -------------------- ----- - --
--
---------- -
---------------- ----- -- ------------
--
--------- -
------------------ -- -- -
----- ------- - ---------------------------------------------------------------
--------- --------- ------------------
------ ------- -
------ --- -- ---------- -
--
--
--
- --
-- -------
---------- ------------------- --------- -- -
----- ------ - ------- --------- -- -- -- ---- ------
------------------------------------ -- -------
----------------- -- -- - -- ------
-- - ----------- ------ - - -
--------- -- - -------------- -- -----
- ---- -
--------- - ------------------ --------------- -- -- -- -----
-
- --
------ ----------
- --来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2e03a03b0ab45f74a8bc14