Vue组件API调用更新对象后传参始终为undefined问题

核心问题 #

1. 异步请求时序问题：getSwatches 里的AJAX请求是异步执行的，你在调用 getSwatches 后立刻打印 updatedProducts，此时请求还未完成，所以输出 undefined；而onSuccess里的打印是请求返回后执行的，所以能拿到正确数据。
2. 非响应式变量：updatedProducts 只是普通变量，不是Vue的响应式变量，就算请求完成后赋值，Vue也无法检测到变化，子组件不会更新拿到新值。

修复步骤 #

1. 将updatedProducts改为响应式ref变量 #

在setup里把普通变量换成ref，让Vue能监听它的变化：

// 替换原来的 let updatedProducts;
const updatedProducts = ref(null);

2. 在异步回调中更新ref的value #

onSuccess里赋值时要操作ref的.value属性：

const onSuccess = (resp) => {
  const updatedProduct = { ...product.value, swatches: resp.products };
  console.log(updatedProduct);
  // 更新ref的value
  updatedProducts.value = updatedProduct;
};

3. 子组件处理初始空值 #

因为请求完成前updatedProducts是null，可以在父组件模板里给子组件加v-if，避免子组件接收空值报错：

<CollectionGridItemSwatches
  v-if="updatedProducts"
  :product="updatedProducts"
  :active-product="activeProduct"
  :set-active-product="setActiveProduct"
  :set-is-loading="setIsLoading"
/>

4. （可选）用async/await封装AJAX，优化代码可读性 #

如果你的_.ajax支持Promise（或者可以封装成Promise），可以把异步逻辑改成async/await，让代码更直观：

// 封装AJAX为Promise
const getSwatches = async (url) => {
  setIsLoading(true);
  try {
    const resp = await new Promise((resolve, reject) => {
      _.ajax({
        type: 'GET',
        url: `${url}?view=json`,
        success: resolve,
        error: reject,
      });
    });
    const updatedProduct = { ...product.value, swatches: resp.products };
    updatedProducts.value = updatedProduct;
  } catch (err) {
    console.error('获取swatches失败:', err);
  } finally {
    setIsLoading(false);
  }
};

// 调用异步函数
getSwatches(`/collections/all/swatch:${handle}`);

修改后的完整代码 #

<template>
  <article>
    <div
      class="pi__wrapper"
      @mouseenter="toggleProductItemHovered()"
      @mouseleave="toggleProductItemHovered()"
    >
      <CollectionGridItemImages
        :product="activeProduct"
        :ss-product-id="product.id"
        :grid-view="gridView"
        :featured="featured"
      />
      <CollectionGridItemSwatches
        v-if="updatedProducts"
        :product="updatedProducts"
        :active-product="activeProduct"
        :set-active-product="setActiveProduct"
        :set-is-loading="setIsLoading"
      />
    </div>
  </article>
</template>

<script>
import {
  ref,
  toRefs,
} from 'vue';

import CollectionGridItemImages from './collection-grid-item-images/CollectionGridItemImages';
import CollectionGridItemSwatches from './collection-grid-item-swatches/CollectionGridItemSwatches';

export default {
  name: 'CollectionGridItem',
  components: {
    CollectionGridItemImages,
    CollectionGridItemSwatches,
  },

  props: {
    product: {
      type: Object,
      required: true,
    },
    gridView: {
      type: String,
      required: true,
    },
    featured: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const { product } = toRefs(props);

    const isLoading = ref(false);
    const productItemHovered = ref(false);
    // 改为响应式ref变量
    const updatedProducts = ref(null);

    const handle = _.handleize(product.value.tags.filter((str) => str.includes('Swatch:'))[0].split(':')[1]);

    const setIsLoading = (loading) => {
      isLoading.value = loading;
    };

    const toggleProductItemHovered = () => {
      productItemHovered.value = !productItemHovered.value;
    };

    const getSwatches = (url) => {
      setIsLoading(true);
      _.ajax({
        type: 'GET',
        url: `${url}?view=json`,
        success: (resp) => {
          const updatedProduct = { ...product.value, swatches: resp.products };
          console.log(updatedProduct);
          // 更新ref的value
          updatedProducts.value = updatedProduct;
          setIsLoading(false);
        },
        error: () => {
          setIsLoading(false);
        },
      });
    };

    getSwatches(`/collections/all/swatch:${handle}`);

    return {
      productItemHovered,
      toggleProductItemHovered,
      updatedProducts,
      setIsLoading,
      // 注意：原代码中activeProduct和setActiveProduct未定义，需补充实现
    };
  },
};
</script>

补充说明 #

• 原代码中activeProduct和setActiveProduct未在setup里定义，需要你补充实现，否则会报错。
• 把变量改成响应式是关键，Vue只有对响应式变量的变化才会触发组件更新，子组件才能拿到最新数据。
• 放在onBeforeMount没用的原因：不管在哪个生命周期钩子调用异步请求，请求都是异步完成的，核心还是变量不是响应式，且请求完成前变量为空。

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