前言
随着 WordPress 管理面板的使用越来越广泛，为了更好地管理和维护 WordPress，很多开发者开始使用 React 或 Vue 等框架来开发 WordPress 管理面板。若想要在 WordPress 开发中使用 React，那么就必须要掌握 npm 包 @wordpress/core-data 的使用方法。在这篇文章里，我将为大家详细讲解 npm 包 @wordpress/core-data 的使用，以及如何在实际开发中使用它。
简介
@wordpress/core-data 是 WordPress 官方提供的数据存储解决方案，使用这个库可以方便地获取和更新 WordPress 数据。这个库主要是为开发 WordPress 管理面板而使用的，所以，如果要开发类似插件和主题这种形式的应用，则不适用该库。
@wordpress/core-data 主要提供以下几个功能：
- 数据存储管理。
- 状态管理。
- 自定义数据的添加和更新。
安装
可以通过以下命令安装 @wordpress/core-data 依赖项和库:
npm install @wordpress/core-data
使用
初始化
在使用 @wordpress/core-data 之前，需要先初始化核心库。在初始化之前，需要先确保结合 WordPress 将其安装在项目中。
// ES6+ import 语法
import { initializeStore } from '@wordpress/core-data'
// 将 URL 替换成 WordPress 完整的 URL
const { dispatch, select } = initializeStore( { url: 'http://example.com' } );初始化库后，可以使用 dispatch 函数和 select 函数来访问和管理应用程序的状态。在使用这两个函数之前，必须先理解存储的概念。
存储
存储是应用程序数据的统一管理和存储方式，相当于一个全局的 Vuex Store。
具体而言，@wordpress/core-data 使用了 nock-router 库，允许我们将访问 WordPress API 的请求和响应拦截器添加到 nock 中，这样我们就可以在实际运行代码时处理请求。
状态管理
我们在应用程序中使用状态来跟踪应用程序的信息。在 @wordpress/core-data 中，我们使用 dispatch 函数来访问状态。
// 创建 Dispatch
const { dispatch } = useSelect( ( select ) => ( {
dispatch: select( 'core/data' ).dispatch,
} ) );
// 更新状态
dispatch( 'core/data' ).setItem( 'key', value );注意，我们要根据使用情况绑定合适的 Dispatch。
添加和更新数据
在添加和更新数据时，需要通过 disaptch 函数来调用相关的 API。注意，这个 API 是可变参数格式。下面举一个简单的例子：
-- -------------------- ---- -------
------ -------- ---- -----------------------
------ - ------------ - ---- -----------------
----- --- - ----- --------- -
----- ------------- ----------------------- -
--------- --
- --
- --
--------- ----------- ---------------- ----------- ------- - --- - --上述代码中，我们通过 WordPress REST API 获取了有关某个文章的所有数据，然后使用 mergeEntities 函数将该文章添加到名为‘postType’的实体中。这样，在调用 select 函数时，就可以直接访问该文章。
const post = select( 'core/data' ).getEntityRecord( 'postType', 'post', postID );
示例代码
-- -------------------- ---- -------
-- -----
------ -------- ---- -----------------------
------ - ------------ - ---- -----------------
-- -- -------- ----
----- --- - ----- --------- -
----- ------------- ----------------------- -
--------- --
- --
- --
--------- ----------- ---------------- ----------- ------- - --- - --
-- ------ ------
----- ---- - ------- ----------- ------------------ ----------- ------- ------ --
-- ----
-----
---- - ------------------- - -----
---- ------------------------ - - ------- --------------------- - - --
------总结
本文详细介绍了 @wordpress/core-data 库的用法。@wordpress/core-data 库是 WordPress 官方提供的一种用于 React 应用的数据管理方案。在实际开发中，开发人员可以灵活地使用，以满足应用程序的需求。掌握了 @wordpress/core-data 的使用方式后，能够快速地开发出高质量的 WordPress 管理面板。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb46cb5cbfe1ea0611287