Polymer组件间共享数据变更同步方案咨询

嘿，看来你已经摸到了Polymer组件间数据同步的门道，我来帮你把这个方案补得更完整、更优雅～

要实现三个视图自动同步数据变更，最稳妥的方式是用**单一数据源（Single Source of Truth）**来管理数据集，然后让三个视图组件通过Polymer的响应式绑定或属性监听来关联这个数据源。相比手动触发事件，这种方式更贴合Polymer的设计理念，也能减少冗余代码。

第一步：封装共享数据存储组件 #

先做一个<data-store>组件作为所有数据的唯一管理者，所有视图都从这里获取数据，数据变更也只在这里处理：

<dom-module id="data-store">
  <script>
    Polymer({
      is: 'data-store',
      properties: {
        dataset: {
          type: Array,
          value: () => [],
          notify: true, // 开启变更通知，让绑定的组件能感知数据变化
          observer: '_onDatasetChanged'
        }
      },
      // 提供安全的修改数据方法，不要让外部直接修改数组/对象
      updateItemProp: function(itemId, propName, newValue) {
        const targetItem = this.dataset.find(item => item.id === itemId);
        if (targetItem) {
          // 必须用Polymer的set方法修改，才能触发变更检测
          const itemIndex = this.dataset.indexOf(targetItem);
          this.set(`dataset.${itemIndex}.${propName}`, newValue);
        }
      },
      // 可选：当整个数据集替换时触发全局事件
      _onDatasetChanged: function(newData) {
        this.fire('dataset-global-update', { data: newData });
      }
    });
  </script>
</dom-module>

这里的关键是：

• 用notify: true让dataset的变更能传递给绑定的组件
• 用this.set()修改数组内对象的属性，而不是直接item.prop = value（后者Polymer检测不到）

第二步：封装三个独立视图组件 #

每个视图只负责自己的展示逻辑，数据完全依赖共享数据源。

1. 全量数据视图 #

<dom-module id="full-data-view">
  <template>
    <h3>全量数据展示</h3>
    <div class="data-item" repeat="{{item in dataset}}">
      <span>ID: [[item.id]] | 名称: [[item.name]] | 值: [[item.value]]</span>
      <button on-tap="_modifyValue" data-id="{{item.id}}">随机修改值</button>
    </div>
  </template>
  <script>
    Polymer({
      is: 'full-data-view',
      properties: {
        dataset: {
          type: Array,
          // 这里不需要notify，因为是从外部接收数据
          reflectToAttribute: false
        }
      },
      _modifyValue: function(e) {
        const itemId = e.target.dataset.id;
        // 调用数据存储组件的方法修改数据
        this.root.querySelector('data-store').updateItemProp(itemId, 'value', Math.random() * 100);
      }
    });
  </script>
</dom-module>

2. 分类统计摘要视图 #

<dom-module id="category-summary-view">
  <template>
    <h3>分类统计摘要</h3>
    <div class="category-group" repeat="{{group in groupedData}}">
      分类: [[group.category]] | 总数: [[group.count]] | 平均值: [[group.avgValue]]
    </div>
  </template>
  <script>
    Polymer({
      is: 'category-summary-view',
      properties: {
        dataset: {
          type: Array,
          observer: '_computeCategoryStats' // 监听数据源变更，自动重新计算
        },
        groupedData: {
          type: Array,
          value: () => []
        }
      },
      _computeCategoryStats: function(newData) {
        if (!newData || newData.length === 0) {
          this.groupedData = [];
          return;
        }
        // 按分类分组统计逻辑
        const categoryMap = {};
        newData.forEach(item => {
          if (!categoryMap[item.category]) {
            categoryMap[item.category] = { category: item.category, count: 0, totalValue: 0 };
          }
          categoryMap[item.category].count++;
          categoryMap[item.category].totalValue += item.value;
        });
        // 计算平均值并赋值
        this.groupedData = Object.values(categoryMap).map(group => ({
          ...group,
          avgValue: (group.totalValue / group.count).toFixed(2)
        }));
      }
    });
  </script>
</dom-module>

3. 极值统计摘要视图 #

<dom-module id="extreme-summary-view">
  <template>
    <h3>极值统计摘要</h3>
    <p>总条数: [[totalCount]] | 最大值: [[maxValue]] | 最小值: [[minValue]]</p>
  </template>
  <script>
    Polymer({
      is: 'extreme-summary-view',
      properties: {
        dataset: {
          type: Array,
          observer: '_computeExtremeValues'
        },
        totalCount: { type: Number, value: 0 },
        maxValue: { type: Number, value: 0 },
        minValue: { type: Number, value: 0 }
      },
      _computeExtremeValues: function(newData) {
        if (!newData || newData.length === 0) {
          this.totalCount = 0;
          this.maxValue = 0;
          this.minValue = 0;
          return;
        }
        this.totalCount = newData.length;
        const allValues = newData.map(item => item.value);
        this.maxValue = Math.max(...allValues);
        this.minValue = Math.min(...allValues);
      }
    });
  </script>
</dom-module>

第三步：主页面组合所有组件 #

在主页面中引入数据存储和三个视图，通过属性绑定实现数据共享：

<dom-module id="app-main">
  <template>
    <data-store id="globalStore" dataset="{{appDataset}}"></data-store>
    
    <full-data-view dataset="{{appDataset}}"></full-data-view>
    <category-summary-view dataset="{{appDataset}}"></category-summary-view>
    <extreme-summary-view dataset="{{appDataset}}"></extreme-summary-view>
  </template>
  <script>
    Polymer({
      is: 'app-main',
      properties: {
        appDataset: {
          type: Array,
          value: () => [
            { id: 1, name: "商品A", category: "电子", value: 299 },
            { id: 2, name: "商品B", category: "服饰", value: 99 },
            { id: 3, name: "商品C", category: "电子", value: 499 }
          ]
        }
      }
    });
  </script>
</dom-module>

关于你提到的事件触发方案 #

如果你更倾向于用事件来同步数据，也可以在<data-store>的数据变更时触发自定义事件，然后让每个视图监听这个事件：

// 在data-store的_onDatasetChanged方法里触发事件
this.fire('dataset-updated', { data: newData });

// 在视图组件的ready方法里监听
ready: function() {
  super.ready();
  this.addEventListener('dataset-updated', this._syncData.bind(this));
},
_syncData: function(e) {
  this.dataset = e.detail.data;
}

不过这种方式需要手动处理数据同步，不如属性绑定来得自动省心。

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