Best practice for fetching data updating url for copy/paste and url sharing purpose
I have a product search page, with useFetch binded to the body of my request containing filters, pagination, fields... everything is reactive and it works fine but in some cases i would like to use 'navigateTo' to navigate the same page but with different query without getting a page rerender... any ideas?
4 Replies
I have a watcher on these properties which I want to navigate to... the problem is that the reactivity of the body occurs before the navigation therefore triggering 2 different request to the api the one from the the body changing and then the one from the page initial load
@manniL / TheAlexLichter Ive been watching all your great youtube videos and they helped a lot. If ever you have thoughts on this I would really appreciate. Thank you
NavigateTo + replace?
Query param changes shouldn’t cause rerender necessarily
Try using useRouteQuery and potentially passing an option “mode: ‘replace’”
This will give you a reactive version of your query parameter that will auto update the url when you change it
Oops… meant https://github.com/vueuse/vueuse/blob/main/packages/router/useRouteQuery/index.ts, not useRouteParams
thanks for your answers guys... I think its a reactivity issue where the computed prop body recalculates too many times based on its dependencies
I finally found my issue, I was loosing reactivity from an object spread syntax
I only I would read the docs more carefully lolll
toRefs is useful when returning a reactive object from a composable function so that the consuming component can destructure/spread the returned object without losing reactivity