Vue Composition Api - 监视传递给外部组合函数的属性

Question

我想查看从设置传递给组合函数的道具：

async setup(props) {
  const { data } = await useOperation(query, props.isEdit);
}

而且每次isEdit的值发生变化，我都想在手表里做点什么：

export const useOperation = async (query, isEdit) => {
  const reload = ref(isEdit)
  watch(
    () => reload.value,
    (result) => {
      console.log(result)
    }
  )
  const { data } = await fetch(query)

  return {
    data
  }
}

props.isEdit 更改时，不会触发手表。我该如何完成这项工作？

Answer 1

你应该直接在setup看道具变化：

async setup(props) {
  const { data } = await useOperation(query, props.isEdit);

  watch(
    () => props.isEdit,
    (result) => {
      console.log(result)
    }
  )
}

通过运行：

watch(
  () => reload.value,
  (result) => {
    console.log(result)
  }
)

您正在查看reload 变量而不是props.isEdit，并且由于useOperation 在setup 期间只运行一次，并且reload 不会暴露在任何地方，因此它的值永远不会改变。

---

或者，如果您确实想在useOperation 中观看，请确保将props 作为参数传递，watch 传递给props.isEdit：

export const useOperation = async (query, props) => {
  watch(
    () => props.isEdit,
    (result) => {
      console.log(result)
    }
  )
...