在Nuxt.js中,我需要跟踪一个名为key1的$route.params键的值。key1值通过someFunction()计算如何将$route.params.key1作为计算属性进行跟踪?以下内容不起作用:
key1
$route.params
someFunction()
$route.params.key1
computed: { $route.params.key1: someFunction() }
slmsl1lt1#
可以使用计算特性Map该值。
computed: { key1() { return this.$route.params.key1 } }
但是我认为你想在它发生变化的时候做一些事情,那么你会使用watch:
watch: { "$route.params.key1"(value) { track(value) } }
6tdlim6h2#
对于组合API(Nuxt 3或Nuxt 2 Bridge),您可以使用useRoute而不是$route,并在useAsyncData/useLazyAsyncData/等上使用watch选项。
useRoute
$route
useAsyncData
useLazyAsyncData
watch
const route = useRoute() const { data: posts } = await useAsyncData( 'posts', () => {}, { watch: [route] } )
在我的例子中,在Nuxt 2 Bridge上,这导致了一个无限循环(RangeError: Maximum call stack size exceeded),并通过一个解决方案解决了它:
RangeError: Maximum call stack size exceeded
const fetchSomething = () => {} // This is a hack because `watch(route)` results in an infinite loop const watchFlag = ref(true) onMounted(() => { watchFlag.value = false }) useLazyAsyncData('', () => { return fetchSomething() }) watch(watchFlag, async () => { await fetchSomething() })
2条答案
按热度按时间slmsl1lt1#
可以使用计算特性Map该值。
但是我认为你想在它发生变化的时候做一些事情,那么你会使用watch:
6tdlim6h2#
对于组合API(Nuxt 3或Nuxt 2 Bridge),您可以使用
useRoute
而不是$route
,并在useAsyncData
/useLazyAsyncData
/等上使用watch
选项。在我的例子中,在Nuxt 2 Bridge上,这导致了一个无限循环(
RangeError: Maximum call stack size exceeded
),并通过一个解决方案解决了它: