1

在我的应用程序中，我有两个独立的组件：

  • 产品组件（在 ui 中显示产品）

  • filter-products 组件（在 ui 中显示标准）

  • total-filter-products 组件（显示在 ui 中应用的总条件项，例如我当前的搜索是age，name依此类推）

它们是独立的，不与输入 ( :) 或输出 ( @) 通信。

我还有一个ts文件，功能useProducts为“api-composition style”。

export const useProducts = () => {

  const criteria = ref({ category: null, age: null, color: null });
  
  const items = computed(() => { return store.get('products').filter(p => filterByCritiria(p)) });

  const load = () => {

    const params = parseSome(criteria.value);

    axios.post('/api/...', { params }).then(r => { store.set('products', r.data)});
  }

  return { criteria, items, load }

}

在products组件中，我只是获取productsfromuseProducts并绑定到模板：

 setup() {
  const { products } = useProducts();
  return { products } 
 }

在过滤器产品中，我获取criteria模板useProducts并绑定到模板。每次criteriaref 中的某些值发生变化（使用 v-model）时，我都会运行该load函数。

   setup() {
      const { criteria, load } = useProducts();
      watch(() => criteria.value, (v) => load() });

      return { criteria } 
     }

在 total-filter-products 组件中，我做了一些逻辑来显示标准：

     setup() {
      const { criteria } = useProducts();

      return { criteria: parse(criteria) } 
     }

这个问题是每次我调用useProducts我执行函数并获取新变量时。

我得到了三倍criteria。因此，如果我更改criteriain filter-products，total-filter-productsandproducts组件将永远不会知道它。

如何以 api-composition 样式在组件之间共享组合？

4

0 回答 0