magento2 front-end大量运用了KnockoutJS，大量的数据能即时更新并且不需要刷新页面，数据无疑是通过AJAX方式获取，但为了效率，AJAX下载后数据会保存到Storage，只有被通知数据过期时才会再次从AJAX更新数据。因此并不能仅仅使用传统的AJAX，需要把流程封装起来。magento2的确提供了一套方法，无奈并没有文档说明，只能自己研究。

magento2把AJAX数据分类打包，分成若干个section，而每个section对应一个能获取数据的PHP类。所以第一步应该声明一个section与定义一个类。

用di.xml声明section并指定PHP类

    
        
             
                  
                       
        
         Vendor\Samples\CustomerData\Book
                    
               
          
     
    

创建PHP类，必须定义getSectionData并返回array数据，它会以JSON格式提交到前端

// Vendor/Samples/CustomerData/Book.phpnamespace Vendor\Samples\CustomerData;use Magento\Customer\CustomerData\SectionSourceInterface;class Book extends \Magento\Framework\DataObject implements SectionSourceInterface{    /**     * {@inheritdoc}     */    public function getSectionData()    {        return [            'message' => 'hello world'        ];    }}

完成以上两步并清除缓存，就可以在前端任意UI组件中调用

require( [ 'ko', uiComponent, 'Magento_Customer/js/customer-data' ], function( ko , Component, customerData ) {    return Component.extend({        initialize: function () {            // 获取数据是observable            var book = customerData.get('book');            // 创建名为message的observable，当customerData被更新（如ajax返回）,会被同步到message            this.message = ko.computed(function(){                // 有data_id意味着数据已准备好                if(book().data_id != undefined)                    return book().message;                else {                    // reload即马上提取远程数据，更新本地缓存。在完成提取之前可先返回空值                    customerData.reload(['book']);                    return '';                }            }, this);                        // 使名叫book的section失效，在下次刷新页面时会自动reload            // customerData.invalidate(['book']);        }    });} );

常见问题

customer-data不会一直向后端提取数据，它会把数据放在Local Storage，如果Section改名，请求可能会一直出错，这是因为请求数据也放在Local Storage里，需要清空Local Storage才能得到更新，例如Local Storage的mage-cache-storage-section-invalidation。