Saving the initial state value in a variable in Vue.js is a crucial step in managing and

My dilemma involves an object in the Vuex store containing data that I need to utilize within a component. I have successfully accessed the data using a getter in the component. However, I am facing a challenge in preserving the initial value of this object in a variable without it being affected by any subsequent changes to the data in the store. This is essential for me to perform a comparison condition.

The code snippet provided below demonstrates this situation, where the 'getSelectedLocation' object is the one whose original value needs to be retained.

data() {
 return {
   toggle: this.getSelectedLocation?.local,
 }
},
computed: {
 ...mapGetters({ getUser: 'user/getUser', getSelectedLocation: 'support/getSelectedLocation' }),
},
methods: {
 async updateUsersLocation() {
   const usersCol = new UsersCollection(this.$fire.firestore)
   const id = this.getUser.id
   const location = this.getSelectedLocation
   return await usersCol.updateUsersLocation({ id, location })
 },
},
}

Answer №1

To ensure the object remains unchanged, two steps are necessary. Initially, create a duplicate of the object to prevent any alterations by reference to the original object. Then proceed to freeze the duplicated object to restrict any further modifications.

const duplicate = Object.assign({}, this.getSelectedLocation())
Object.freeze(duplicate)

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

What is the best way to permanently hide a specific button in React.js?

Is there a way to make a button disappear after it has been clicked, and remain hidden even when navigating to different components or pages? Here is the code snippet: <Button className="but" variant="primary" onClick={(e) =&g ...

Encountered a failure while loading modules in AngularJS

When I tried opening the index.html page using Chrome, I encountered an error stating that the correct modules could not be found. Uncaught SyntaxError: Unexpected token < angular.js:1 Uncaught SyntaxError: Unexpected token < controller.js:1 ...

Encountering routing challenges while trying to navigate to the identical component

I have a dashboard specifically for 'x'. When I click on the logo in the header bar, it triggers a function with the following functionality: if(this.isVerifier) { this.$router.push({ name: 'sales-verifier-dashboard', ...

Tips for utilizing the router instance on a different HTML page within the Backbone JS framework

I'm new to Backbone JS and still learning its intricacies. In main.js, I have created a router class that is included in index.html. I've also created an object of that router class associated with the same HTML page. However, when I redirect t ...

"Explore the endless possibilities of Prototyp JavaScript with an array of innovative new features

I recently created a collection form using Symfony, consisting of a Mainform and Subforms within it. The functionality allows me to add new Mainforms and corresponding Subforms, which is working perfectly with my current script. However, the issue I&apos ...

The setTimeout function interrupts the event loop

Recently, I came across conflicting information regarding the usage of setTimeout to create nonblocking/asynchronous functions. One article suggested that using setTimeout is essential for this purpose, while another claimed that it actually blocks the eve ...

How to retrieve a string value from an object in Express.Js by using the key value pair

I'm wondering about the proper way to retrieve a value from an object where the key value is a string. This involves sending data from the client side and receiving it on the backend using express.js. Example of data sent from the client side: var ...

Fill the next Thursday with JavaScript

I'm having trouble updating the date for the upcoming Thursday using JavaScript. The current script works fine until the end of the month, but if it's the 25th of August, the output will be "Next Thursday - 8/32/2022". I need a more intelligent s ...

Unable to retrieve valid inputs from text fields by utilizing jQuery selectors

Extracting information from text fields is my goal. Specifically, these fields contain dates which consist of three parts: the year, month, and day. The dates are divided into two sections - the first date and the last date, serving as boundaries for a sea ...

Invalid component prop provided to ButtonBase in Material UI. Ensure that the children prop is correctly rendered in this custom component

Forgive me for asking a basic question, as I am not the most proficient frontend developer and have searched extensively online. Whenever I inspect my frontend application in Chrome, I keep encountering this error. (3) Material-UI: The component prop pro ...

Is there a way to set up gulp without relying on npm when using shared hosting?

While working on my shared hosting, I encountered a roadblock regarding the installation of gulp for compiling LESS assets into CSS. The hosting administrator has declined to install npm, which is essential for setting up gulp. Given this limitation, I am ...

Can you provide the function that updates subscription and account details using Recurly JS?

Recurly has unfortunately declined to provide assistance with this issue. I must understand the specific format of the objects, as Recurly will not process any extra data or incorrect query arguments (which vary for each function). Ruby: subscription = ...

Tips for continuing to write to the same CSV file without starting over

Currently, I am utilizing a nodejs package to write data to a CSV file every minute. The initial creation of the file and the first write operation work fine. However, when attempting to write to the same file again, I encounter an error in nodejs. Despite ...

Whenever a POST request is received, Flask always replies with a status code of 400

During my work on a project using Vue.js with Flask, I encountered a bug related to POST requests. Flask consistently responds with a 400 error code for all requests. To replicate the issue, follow these steps: main.py import os from ...

Utilizing Vue Router to leverage specific getters from Vuex

I am currently facing an issue with accessing the authenticated user in my Vuex store within my router.js file. { path: '/admin/login', name: 'admin-login', component: AdminLogin, beforeEnter(to, from, next) { console.log(s ...

How can you dynamically disable a radio option button using Angular rendering without relying on an ID?

Is there a way to disable the male radio button without using an id, and utilizing angular rendering2? It seems like it's not working for me. I need to make this change only in the form.ts file, without altering the HTML code. form.html <label& ...

How can one develop a Progressive Web App using Vue.js?

I used to develop PWAs using vanilla JavaScript in the following way: importScripts('/src/js/idb.js'); importScripts('/src/js/utility.js'); const CACHE_STATIC_NAME = 'static-v4'; const CACHE_DYNAMIC_NAME = 'dynamic-v2&a ...

Why is my VueJS 2.0 deployment to a sub-folder resulting in a blank page?

I've been attempting to launch my Vue2 web application in a subdirectory on my domain, but I'm encountering a blank page. I've experimented with various solutions like adjusting the config/index.js file to correspond with the path on my live ...

"Encountered an error with resolving the dependency tree during the installation of npm react-facebook-login, known as ERESOLVE

Having trouble installing npm react-facebook-login in my react application due to dependency errors. It's a bit daunting, and I'm hesitant to forcefully install something that could lead to issues down the line. Since I am new to JavaScript, what ...

Enhancing nested mongoose arrays by a particular value for updates

In my mongoose schema, I have an array that contains items and another array. var mongoose = require('mongoose'); var Schema = mongoose.Schema; var CompanySchema = new Schema({ dateCreated: { type: Date, default: Date.now }, ownerId: { typ ...