vue.js 如何将这个计算的ref提取到一个可重用的函数中？

olmpazwi 于 2023-03-31 发布在 Vue.js

关注(0)|答案(2)|浏览(157)

我成功地使用Vue 3 Computed ref返回了不同的Firebase doc，这取决于currentAuditId值是否为undefined。
现在我想把这个功能提取到一个可重用的函数中，但是当我这样做的时候，计算引用就停止工作了。
这个Computed ref可以工作。console.log首先打印undefined，然后打印currentAuditId：

const auditSource = computed(() => {
  console.log(user.value?.currentAuditId); // Prints 'undefined' initially, and then later it updates and prints the correct currentAuditId string
  if (user.value?.currentAuditId) {
    return doc(collection(firestore, "audits"), user.value?.currentAuditId);
  } else {
    return doc(collection(firestore, "audits"));
  }
});

const audit = useDocument<Audit>(auditSource);

但是当我试图将计算的ref精确地转换为可重用的函数时，计算的ref不再更新。console.log打印undefined，然后没有其他内容：

const computedDoc = (collectionPath: string, documentId?: string) => {
  return computed(() => {
    console.log(documentId); // Prints 'undefined', and does not update again after that!
    if (documentId) {
      return doc(collection(firestore, collectionPath), documentId);
    } else {
      return doc(collection(firestore, collectionPath));
    }
  });
};

const audit = useDocument<Audit>(
  computedDoc("audits", user.value?.currentAuditId)
);

vue.js

来源：https://stackoverflow.com/questions/75831173/how-to-extract-this-computed-ref-into-a-reusable-function

2条答案

按热度按时间

vawmfj5a1#

computed在计算时设置依赖关系。提前访问user.value?.currentAuditId将阻止它工作，因为documentId是非React值。
为了匹配原始代码，它应该接受无功值作为输入，即ref：

const useComputedDoc = (collectionPath: string, documentIdRef: Ref<string>) => {
  return computed(() => {
    const documentId = unref(documentIdRef);
    ...
  });
};

const auditId = computed(() => user.value?.currentAuditId);
const auditDoc = useComputedDoc("audits", auditId);
const audit = useDocument<Audit>(auditDoc);

两个可组合对象可以按如下方式组合：

const useComputedDocument = <T>(
  collectionPath: string,
  documentIdRef: Ref<string>
) => {
  const computedDoc = computed(() => {
    const documentId = unref(documentIdRef);
    if (documentId) {
      return doc(collection(firestore, collectionPath), documentId);
    } else {
      return doc(collection(firestore, collectionPath));
    }
  });

  return useDocument<T>(computedDoc);
};

const auditId = computed(() => user.value?.currentAuditId);
const audit = useComputedDocument<Audit>("audits", auditId);

赞(0）回复(0）举报 2023-03-31

b09cbbtk2#

尝试使用ref（）或reactive而不是computed。我猜这是一个未定义documentId的时间问题。Computed在变量赋值之前被调用。我不会在函数中返回计算函数。我在Vue2中使用了很多computed，但现在在Vue3中我使用ref或reactive。希望这能有所帮助。

赞(0）回复(0）举报 2023-03-31