时间戳

首页 > 解决方案 > Vue Composition API：安装回设置中的初始化变量

vue.js - Vue Composition API：安装回设置中的初始化变量

问题描述

我尝试了新的组合 API。

可组合函数 useProdcut.js：

export default function useProduct() {
     const product = reactive({});
    
   async function getProduct(id) {
     try{ 
       const response = await {{http Request}}
       product.value = response.data; // it is a single object
     }catch(err) {
       console.log(err);
     }
   } 
    return {product, getProduct}
}

在我的组件中，我使用了两个可组合的函数：

setup(_, {root}) {
…
const { product, getProduct} = useProduct();

const {productAlias, productTitle, createdAt, …} = useProductDetails(prodcut);

onBeforeMount(async () => {
loading.value = true;
await getProduct(root.$route.params.id);
loading.value = false;
});

return {loading, product, productAlias, …}
}

在 useProductDetails.js 中，我收到了以下消息：

product.value 未定义。

我认为这是因为在 onBeforeMount 中检索了产品的值。但是我怎样才能实现在安装后传递具有价值的产品参考呢？还是有其他方法？

我很感激任何帮助。谢谢！

标签： vue.jsvue-composition-api

解决方案

const product = reactive({});

product 应该是ref而不是reactive，因为我重新分配了整个对象。

Whenproduct被重新分配给response.data哪个是新对象，因此它不再引用旧的反应对象。在这里查看更多。

推荐阅读