Vue 3 组合 api - ref 在其中使用另一个 ref 时不会更新

Question

下面是我想要实现的基本思路。我意识到我没有包括我的全部代码，但这是我坚持的。

当我更改第一个 const（也就是说，'hockey'）时，const thevaluethatchanges = ref('baseball') 值控制台输出为 'hockey'，但在第二个 const 中它保持为 'baseball'。

如何在第二个 const 中获取要更新的值？

const thevaluethatchanges = ref('baseball')
const axiosdata = ref(`sampleurlq=${thevaluethatchanges.value}&samplestuff=20etc`)

感谢所有帮助

Answer 1

您似乎在寻找 computed。

你的例子中的语法是这样的

const axiosData = computed(() => `sampleurlq=${thevaluethatchanges.value}&samplestuff=20etc`)

可在此处找到文档：https://vuejs.org/api/reactivity-core.html#computed

Answer 2

TL;DR - 并非我所有的变量都是反应性的。

我解决了我的问题，所以对于以后可能遇到类似问题的任何人：

我有一个输入字段和一个按钮，一旦你按下按钮，我希望我正在调用的数据根据输入中的内容进行更改（比如从棒球到曲棍球）。

我有两个 div 用于测试，一个用数据测试，一个用变量改变，数据没有更新，但变量更新了。

我最终做的是制作一个包含所有 url 位的反应对象，一个跟踪该反应对象变化的 watch 方法，然后调用一个函数 'assembled' url 并允许模板更新。

简化代码

const all-avail-data = ref('')

const allData = reactive({
  thevaluethatchanges: 'baseball',
  thebaseurl: 'https://whateverurl',
  therestoftheurl: '&otherparameters',
})

watch(allData, (currentValue, oldValue) => {
  console.log(`allData.thevaluethatchanges has changed to: ${allData.thevaluethatchanges}`)
  function-that-assembles-url()
})

const function-that-assembles-url = () => {
  const assembleurl = allData.thebaseurl + allData.thevaluethatchanges + allData.therestoftheurl
  //code to use axios to make http request
  all-avail-data = whatever-comes-from-axios-code-above
}

Vue 3 组合 api - ref 在其中使用另一个 ref 时不会更新

Vue 3 composition api - ref doesn't update when it's using another ref in it

vuejs3