How to merge ref with another ref?

[wizardnet972]

How to update/merge ref with another ref?

I'll explain by this example:
I create a useProduct function gets an argument and return a ref base of that argument:

const useProduct = (productId) => {
  insertToTheStoreAsync(axios.get(`/api/products/${productId}`)); // not really but lets say it make a http call and insert to the global store.

  const items = computed(() => { return fromTheStore.get(productId)...  });

  return { items }
}

In my component I have a setup function which I invoke useData:

setup() {
  const productId = 1;
  const { items } = useProduct(productId);
  return { items };
}

Which works great.
But I want to get the productId from the props. and here the problem is. seince the props.productId is expected to change (data binding) so I need to use watch and then call the useProduct function.

The problem is I already declare the items so in the setup scope. and I need to change it in the watch scope.

setup(props) {
  const items = ref(null);
  watch(() => props.productId, (v) => {
    if (!v) return;

    const { items } = useProduct(productId); // <-- can't do it, the items is declared.
  });

  return { items }
}

How can I solve this?

edit
Here for example I use promise (simulate a http call): (the problem is not promise but the way of how vue composition api works)

const useProductApi = ({ productId }) => {
  const api = (p, ms) => new Promise((resolve) => setTimeout(resolve({ p, items: [{ id: 1 }, { id: 2 }] }), ms));

  const productApi = usePromise(() =>
    Promise.all([ api(productId, 5000) ]).then(r => /*** INSERT r TO THE STORE ***/)
  );

  return productApi;
};

const useProduct = (productId) => {
  const product = useProductApi({ productId });
  product.exec();

  const items = computed(() => { return fromTheStore.get(productId)...  });

  return { items }
}

[enekesabel]

Not sure, but the following might work:

setup(props) {
  const items = ref(null);
  watch(() => props.productId, (v) => {
    if (!v) return;

    // aliasing destructed 'items' to 'productItems' variable
    const { items: productItems } = useProduct(productId);

   // updating the value of the ref
   items.value = productItems.value;
  });

  return { items }
}

[wizardnet972]

It might.
but I think the problem is in the computed function. what makes computed to trigger? vue lifecycle?

and the other problem is if I want to do reuse of "useXXX" I will need a "global" variables in the parent "useXXX", which seems bad. say:

const xxx;
const yyy;
...
watch(() => ... {
 const { xxx1 } = useXXX();
 xxx = xxx1;

 const { yyy1 } = useYYY();
 yyy = yyy1;

 ...
}

[LinusBorg]

One issue that you have here is a name conflict between the original ref named items and the items returned by useProduct().

The solution is to rename the items returned from the use function and assign their value to the initial items that you created before. Just like @enekesabel said that's the correct way to tackle that.

but I think the problem is in the computed function. what makes computed to trigger? vue lifecycle?

I don't understand what you mnean exactly. What is your problem with the computed? Does it not work? What is the expected behaviour?

I can't tell as I have no idea what fromTheStore.get(productId)... is supposed to do.

[LinusBorg]

I'll close this as it has become inactive and I don't see a way for us to do anything at this stage.