useUrlSync

Двобічно синхронізує реактивний об'єкт стану з query-параметрами URL, безпечно для SSR.

Під час виклику (синхронно): читає поточний URL і заповнює стан ще до монтування дочірніх компонентів — жодного спалаху значень за замовчуванням під час завантаження сторінки чи після жорсткого оновлення.

Реактивно: стежить за станом і оновлює URL після кожної зміни через router.replace (без нових записів в історії).

Використання

const filters = ref({
  search: '',
  sort: 'newest',
  price: { min: 0, max: 500 },
})

useUrlSync(filters)

Передайте явний список ключів, щоб випадково не синхронізувати внутрішній чи несеріалізовний стан:

const state = ref({
  category: '',
  sort: 'newest',
  _sessionToken: 'abc123', // never touches the URL
})

useUrlSync(state, ['category', 'sort'])

Кодування

Значення	URL
{ price: { min: 10, max: 500 } }	price.min=10&price.max=500
{ tags: ['vue', 'ts'] }	tags[0]=vue&tags[1]=ts
{ items: [{ name: 'Alice' }] }	items[0].name=Alice
порожній рядок	видаляється з URL
File / Blob	мовчки пропускається

Параметри

Параметр	Тип	Опис
state	Ref<Record<string, unknown>>	Реактивний об'єкт для синхронізації
keys	string[]	Ключі верхнього рівня для синхронізації. Якщо не вказано — синхронізуються всі ключі стану / URL

Повертає void.