Issue with VueUse useStorage function failing to update stored object properties

Having difficulty updating a property in an object stored in localStorage using the useStorage function.

Inside the App.vue file:

routeStore.query = {
  tab: 'products',
  subTab: 1,
  search: '',
  article: '',
}
console.log(routeStore.query)
console.log(localStorage.query)
useStorage('query', routeStore.query)
console.log(localStorage.query)

console:

Proxy(Object) {tab: 'products', subTab: 1, search: '', article: ''}
{"tab":"products","subTab":2,"search":"","article":""}
{"tab":"products","subTab":2,"search":"","article":""}

Trying to ensure that query.subTab remains as 1. Any advice on the correct approach to achieve this?

javascriptvue.jsvuejs3local-storagevueuse

Answer №1

Alright, so the default behavior of useStorage does not automatically synchronize the default object with localStorage. You can refer to this link for more information:

You can try using mergeDefaults.

routeStore.query = {
  tab: 'products',
  subTab: 1,
  search: '',
  article: '',
}

useStorage(
  'query',
  routeStore.query,
  localStorage,
  { mergeDefaults: true } // <--
)

Answer №2

When working with Vue, it is recommended to utilize the Merge Defaults option for improved efficiency.

useStorage('query', routeStore.query,  localStorage, { mergeDefaults: true })

For a live example, check out this JSFiddle link: https://jsfiddle.net/89dhsf5y/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Invalid web address entered

While attempting to incorporate a functionality that opens a new window to a specific link when clicking an icon, I encountered an issue where the click action redirects to the wrong URL. Instead of directing to the URL specified in its href attribute, it ...

javascripthtmlurlhref

If every object within the array contains a value in the specified property, then return true

In my current project, I am working with an array of objects that looks something like this: $scope.objectArray = [ {Title: 'object1', Description: 'lorem', Value: 57}, {Title: 'object2', Description: 'ipsum', V ...

javascriptangularjs

What is the correct way to test history.push and history.replace in React applications?

When attempting to test the replace or push functions, I am encountering issues. When using mock, it is not being called at all and results in an empty object representing history. The error message I receive states: "Cannot spy the replace property beca ...

javascriptreactjsunit-testingjestjsreact-testing-library

Encountering an issue when running npm build on server

I attempted to deploy my application on the hosting server and encountered the following error: Failed to compile. ./node_modules/next/dist/pages/_app.js Error: failed to process The global thread pool has not been initialized.: ThreadPoolBuildError { kin ...

javascriptreactjsnode.jsnext.jsnpm-install

Create a variety of unique objects on the canvas without any repetition or unwanted overlapping

Is there a way to generate objects on a map in a HTML5 Canvas without them overlapping or occupying the same space? I tried checking inside an array to see if the next 20 values are already taken to prevent overlapping, but it didn't work as expected ...

javascriptarrayshtmlcanvas

mandating the selection of checkboxes

Currently, I am exploring the possibility of automatically selecting a checkbox when an option is chosen from a dropdown menu. Below is a code snippet that demonstrates what I am aiming to tweak: $('.stackoverflow').on('change', func ...

javascriptjqueryhtml

Can you help me identify the issue with my current Jade for loop implementation?

Here is my full loop code written in Jade: block content div(class='row') div(class='col-lg-12') h1(class='subject') 로또라이 div(class='row') div(class='col-lg-8') - for (var ...

javascripthtmlnode.jsexpresspug

Using jQuery to append content with a variable as the source

Recently delving into jQuery and encountering an issue with getting my variable inside src when using append. Either it's not functional at all, or just displaying the variable name in string form in the console. Here is the code causing trouble: va ...

javascriptjqueryhtml

What could be causing my VueJS Component not to show up on the screen?

Within my Vue application, I am working with a view called "PasswordResetView": <template> <v-content> <v-card> <v-card-title primary-title> Passwort ändern </v-card-title> <v-card-text> ...

vue.js

onkeypress() method not triggering the function

I have a task to prevent users from typing "%" in a textArea, so I implemented the following: However, even after clicking inside the text area, I can still type '%', indicating that my onkeypress function is not working properly or there is an ...

javascriptangularjsfunctioncontrollertextarea

Creating an Angular service that checks if data is available in local storage before calling an API method can be achieved by implementing a

I am currently working on developing an Angular service that can seamlessly switch between making actual API calls and utilizing local storage within a single method invocation. component.ts this.userService.getAllUsers().subscribe(data => { conso ...

javascriptangulartypescriptrxjs

What is the best way to verify the type of an object received from request.body in Typescript

Is it possible to check the object type from the request body and then execute the appropriate function based on this type? I have attempted to do so in the following manner: export interface SomeBodyType { id: string, name: string, [etc....] } ...

javascripttypescriptif-statementtypes

Utilizing the power of dynamic variable naming within ng-repeat

Has anyone ever tried using a similar approach? I am having trouble parsing {{}} within an ng-repeat. It works fine with ng-options. <option value="" ng-repeat="k in selected_grp_keys_{{value.key.id}}" value="{{k.id}}" ng-selected="k.id == value.fk_k ...

javascriptjqueryangularjs

Mapping routes in ExpressJS

I am interested in developing a programmatic route generator. Within my project, I have a module called ./utils/crud.js structured as follows: const express = require('express'); const router = express.Router(); module.exports = function (Mode ...

javascriptnode.jsexpress

Accordion Functionality in Vue with Animation Effects

I'm struggling to implement a smooth transition for the Accordion component, but unfortunately it's not working as expected. Everything else is functioning correctly except for the animation. template: <div class="accordion"> <di ...

vue.jsvuejs2vue-component

I would like to give the option for file uploads, but the form refuses to submit unless a file is uploaded

I've recently developed a form in React and React Bootstrap, and I've encountered an issue with the file upload feature. I want the file upload to be optional, but when I try to submit the form without uploading a file, it doesn't work as ex ...

javascriptreactjsreact-bootstrapbootstrap-5

Exploring JSON Object with ng-disabled in AngularJS

One unique feature of my web application is the ability to add new users (username + password) through a form. To prevent duplicate usernames, I have a JSON object called l_usernames defined in a controller named UsersController. This object contains all u ...

javascripthtmlangularjsjson

Extracting the href attribute from a child <a> tag

I am struggling to retrieve the value of the href within the code structure below: <div class=""> <div class=""> <div class=""> <a href=""><img src=""></a> </div> </div> </div> The m ...

javascriptjqueryhtml

Struggling with jquery .append issue

Here is the HTML code snippet: <div class="expand"> <div class="title" id="SectionTitle2">Academics</div> <input type="button" onclick="showTitleForm('2');" name="editTitle2" value="Edit Title"> <form id="titleForm2" m ...

javascriptjqueryajax

Utilizing JavaScript Files Instead of NPM as a Library for Open Layers: A Step-by-Step Guide

I've been attempting to get Open Layers to function in my Eclipse web development environment, but I've encountered some challenges along the way. The setup instructions provided on the Open Layers website focus mainly on using npm. Nevertheless, ...

javascripthtmlnpmopenlayers