Woocommerce Blocks：通过StoreAPI添加商品后迷你购物车不刷新

在WordPress区块主题中使用Mini-Cart Block时，通过@wordpress/create-block创建的自定义区块调用WooCommerce Store API完成商品添加购物车操作后，迷你购物车内容无法自动刷新。全网搜索未找到通过API触发迷你购物车重新加载的相关方案，求解决思路。

function addToCart() {
    console.log("add-to-cart");
    apiFetch({
        path: "/wc/store/v1/cart/add-item",
        method: "POST",
        data: {
            id: 79,
            quantity: 1
        },
        headers: {
            Nonce: window.vars.nonce,
        },
    }).then((res) => {
        console.log(res);
    });
}

• 派发WooCommerce购物车更新事件：WooCommerce前端系统监听wc/store/cart/updated自定义事件，API调用成功后手动派发该事件即可通知Mini-Cart Block刷新。修改后的代码示例：

  function addToCart() {
      console.log("add-to-cart");
      apiFetch({
          path: "/wc/store/v1/cart/add-item",
          method: "POST",
          data: {
              id: 79,
              quantity: 1
          },
          headers: {
              Nonce: window.vars.nonce,
          },
      }).then((res) => {
          console.log(res);
          // 触发购物车更新事件
          document.dispatchEvent(new CustomEvent('wc/store/cart/updated'));
      });
  }
  

• 同步更新购物车全局状态：若自定义区块使用@wordpress/data，可订阅WooCommerce购物车数据，或用API返回的更新后购物车信息直接更新全局购物车状态，触发Mini-Cart重新渲染。
• 调用Mini-Cart内部刷新方法：查看Mini-Cart Block源码，找到其内部的刷新逻辑，通过区块实例或DOM操作调用对应方法。此方式需依赖区块的实现细节，兼容性略差。
• 强制重新渲染Mini-Cart区块：通过移除再插入Mini-Cart的DOM元素，或使用wp.data.dispatch('core/block-editor')相关方法强制更新区块。此为兜底方案，优先推荐事件触发方式。

内容的提问来源于stack exchange，提问作者Andrei