npm 包 wp-util 使用教程

如果你正在使用 WordPress，那你一定对 wp-util 这个 npm 包不会感到陌生。它是 WordPress 官方提供的前端 JavaScript 工具集，可以实现很多有用的功能，例如 ajax 调用、路由控制、dom 操作等等。在这篇文章中，我们将介绍如何使用 wp-util，并提供一些使用示例。

安装 wp-util

首先，你需要使用 npm 安装 wp-util：

npm install @wordpress/util --save

在你的脚本中引入 wp-util：

import { apiFetch } from '@wordpress//util';

使用 wp-util

Ajax 请求

wp-util 提供了简单易用的 ajax api，可以发送 get 和 post 请求。下面是一个发送 get 请求并处理响应的示例：

apiFetch( { path: '/wp-json/wp/v2/posts' } ).then( posts => {
    console.log( posts );
} ).catch( error => {
    console.error( error );
} );

path 参数指定了请求的路径，这里是获取 WordPress 的文章列表。apiFetch 返回一个 Promise 对象，可以使用 then 方法处理响应数据，也可以使用 catch 方法处理错误。

路由控制

wp-util 还提供了路由控制的功能，可以将不同的页面和功能映射到不同的路由上。下面是一个示例，演示了如何将一个组件绑定到路由上：

import { registerRoute } from '@wordpress//util';
import MyComponent from './MyComponent';

registerRoute( '/my-component', { component: MyComponent } );

这样，访问 /my-component 就可以显示 MyComponent 组件了。

数据存储

wp-util 还提供了一个简单的数据存储 api，可以方便地存储和获取数据。下面是一个示例，演示了如何存储和获取一个名为 myData 的数据：

import { dispatch, select } from '@wordpress//data';

dispatch( 'myData' ).set( 'hello, wp-util!' );

const myData = select( 'myData' ).get();
console.log( myData ); // "hello, wp-util!"

使用 dispatch 方法设置数据，使用 select 方法获取数据。

总结

通过上面的介绍，你应该对 wp-util 的使用有了更深入的了解。当然，wp-util 还提供了很多其他有用的功能，例如本地化、路由控制等等。希望本文可以帮助你更好地使用 wp-util，并加速你的 WordPress 前端开发。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671158dd3466f61ffe5e3