Clearing state in VUEX following a triggered function in mutations within Vue.js

Is it possible to reset all values within my state back to default when a trigger in mutations is activated? This would mean that none of the state values will have any data filled in them.

Typically, I populate my variables with values from my Vue components. However, when reset_data is called, I want everything to go back to its default setting.

How can I make this happen using VueX? Thank you for your help!

STORE.TS:

export default createStore({
    state: {
        test1: "",
        test2: "",
        test3: "",
        test4: "",
        test5: "",
    },

    mutations: {
        reset_state(state) {
          //This function gets triggered by a component in my VueJS project
          //I need to reset the state here
        }
    }
})

Note: I am not looking for a solution where I individually declare every variable (test1, test2, ...) for resetting purposes.

Answer №1

One potential solution is to duplicate the object:

let info = {
     value1: "",
     value2: "",
     value3: "",
     value4: "",
     value5: "",
}

export default createStore({
    state: { ...info },

    mutations: {
        reset_state(state) {
          state = { ...info }
        }
    }
})

The spread operator is necessary to prevent keeping its original reference.

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

"Using Typescript, we can switch the keys and values in a JSON object to their corresponding values and

I have been attempting to switch keys with values and vice versa, but I haven't been able to find the correct solution using JavaScript/TypeScript. course = [ { "name" : "John", "course" : ["Java ...

Managing login API tokens in Vue JS

I have implemented a custom Login component in my Vue project: var Login = Vue.extend({ template: '#auth', data: function () { return {username: '',password: '',errorMessage:''}; }, methods : ...

modifying checkbox appearance in Angular depending on certain criteria

Is it possible to update the checkbox color and text color based on certain conditions? Currently, my output shows that the checkbox is checked but the check icon is hidden. I would like the check mark to be visible when the checkbox is checked, and also c ...

When defining a stripe in TypeScript using process.env.STRIPE_SECRET_KEY, an error of "string | undefined" is encountered

Every time I attempt to create a new stripe object, I encounter the error message "Argument of type 'string | undefined' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string& ...

Using Vue to iterate through a list with conditional logic is as intuitive

I am completely new to vue, and facing a challenge with a conditional situation that I usually handle with PHP. My goal is to iterate through an element with a condition inside it. Below is how I envision the structure: <ul> <li>A</li&g ...

Save visuals in the typescript distribution folder

Is there a way to properly include images in a Typescript project? I attempted to include the files or directory in tsconfig.json, but it didn't seem to work as expected. "include": [ "src/resources/**/*.png", // <- ...

Array of dynamically typed objects in Typescript

Hello, I am a newbie to Typescript and I recently encountered an issue that has left me stumped. The problem I am facing involves feeding data to a Dygraph chart which requires data in the format [Date, number, number,...]. However, the API I am using prov ...

Encountering a hindrance with NPM proxy while attempting to globally install Vue CLI

I have encountered an issue while trying to install Vue Cli globally. The installation process is not completing and I am receiving errors related to proxy settings. I tried to manually add values to the .npmrc file as shown below, but it did not resolve t ...

Endless scrolling with Laravel and Vue fails to load data due to request not being sent

Welcome everyone, I am new to using vue.js. I have encountered a simple issue with infinite scroll. Even though I have configured it as shown below, when the page is reloaded, the request to fetch data from the database for page 1 is not sent. I would appr ...

Are there inline type assertions in Typescript that function similarly to assertion functions?

Having a good understanding of assertion functions and other inline forms of type assertions in TypeScript, I have two interconnected questions. Firstly, why do they not provide the same level of assertion to TypeScript? Secondly, is there a way to achieve ...

Checking an Angular 2 Component with Constructor Argument

Imagine having an Angular 2 Component containing two input parameters: @Component{... (omitted for clarity)} export class SomeComponent { @Input() a: number @Input() b: number } When needing to test this component, the process typically involves someth ...

Tips for streamlining the use of http.get() with or without parameters

retrievePosts(userId?: string): Observable<any> { const params = userId ? new HttpParams().set('userId', userId.toString()) : null; return this.http.get(ApiUrl + ApiPath, { params }); } I am attempting to streamline the two http.get ca ...

How can you toggle the selection of a clicked element on and off?

I am struggling with the selection color of my headings which include Administration, Market, DTA. https://i.stack.imgur.com/luqeP.png The issue is that the selection color stays on Administration, even when a user clicks on another heading like Market. ...

Could it be that Vue component slots are not seen as direct descendants?

Imagine I have a main component called Tabs, which accepts child Tab Components as slots. Here is how the structure looks like: Tabs (Parent) <div> <slot name="tabChild"> </div> Tab (Child) <div> Tab {{name}} </div> ...

nvim-typescript incorrectly flags non-existent type errors

I am experimenting with using neovim and have set up a minimal configuration as follows: call plug#begin() Plug 'mhartington/nvim-typescript', {'do': './install.sh'} Plug 'leafgarland/typescript-vim' Plug 'He ...

Is there a way to include a query directly as a string in Drivine and Neo4j, instead of using a separate file?

My current setup involves utilizing Drivine in conjunction with Neo4j. In the provided example, there is a demonstration of injecting a query sourced from a separate file. I am curious to learn how I can directly inline a query as a string instead? ...

Can Vue be utilized to dynamically encase an element or component with a transition by means of a personalized directive or render function?

Is there a way to simplify and clean up code for both myself and my designers? I am looking for a method to achieve something similar to the example below. Can a custom directive or render function be used to implement this with just a simple attribute? T ...

Collada integration with Angular using Three.js

Requesting assistance to develop a webapp using Angular4 with THREEjs for viewing Collada Objects, but encountering challenges. UPDATE: Seeking a working example or helpful hints as efforts in researching and exploring code with other loaders have prove ...

When importing jQuery into a Vue project using the vue-cli tool, a few errors may appear, however, these errors do

When using vue-cli, I import jQuery in webpack. Since I am also using layer.js, I import jQuery in index.html. webpack.base.conf.js plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jq ...

Using constants is a great way to streamline the process of displaying labels in a user interface built with Angular

Is there a way to dynamically display labels on my web page using constants, properties, or a JSON file in Angular 7? The goal is to allow for easy updates of label text without directly changing the HTML files. Instead, I want to be able to update a cons ...