Is it feasible to commit an object on Vue X through Actions?

I have a question regarding Vue X and actions (with commit).

Can an object be passed as input in Commit?

Similar to:

...
action{
  ResetLoginStats({commit}){
    commit({
      'SetMutation1':false,
      'SetMutation2':true,
      'SetMutation3':''
      ...
    });
  }
  ...
}

The entire Action section :

ResetSignInStats({ commit }) {
            document.getElementById('Semail').value = '';
            document.getElementById('Spwd').value = '';
            document.getElementById('SpwdC').value = '';
            document.getElementById('Sname').value = '';
            document.getElementById('SBio').value = '';

            commit('setsubFailure', false);
            commit('setMSGfaillure','');
            commit('setsubOkay', false);
            commit('setsubCompleted', false);
            commit('setCHKeMail', false);
            commit('setCHKpassword', false);
            commit('setCHKuserName', false);
            commit('setLoading', false);
        },

Thank you for your assistance and response. Best regards!

Answer №1

Achieving this is totally doable

...
action{
  UpdateUserCredentials({dispatch}){
    dispatch('SetMutation1', true);
    dispatch('SetMutation2', false);
    dispatch('SetMutation3', 'new data');
  }
  ...
}

More information can be found here

Answer №2

After some consideration, I have implemented this solution :

...
mutations:{
    setStats(state, newValue){
        state.status.setStatus = newValue.setStatus;
        ...
    }
}
...
actions:{
    ...
    ResetSignInStats({ commit }) {
        document.getElementById('Semail').value = '';
        document.getElementById('Spwd').value = '';
        document.getElementById('SpwdC').value = '';
        document.getElementById('Sname').value = '';
        document.getElementById('SBio').value = '';

        commit('setStats',{
            setStatus : flase,
            setMSGfaillure : '',
            setsubOkay : false,
            setsubCompleted: false,
            setCHKeMail : false,
            setCHKpassword : false,
            setCHKuserName : false,
            setLoading : false
        });
    },
}
...

I appreciate your assistance in solving this matter :)

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 process for verifying the password field in bootstrap?

In my asp.net project using bootstrap, I have implemented password field validation. When the user clicks on the password field, an information box is displayed. <div id="pswd_info"> <h4>Password requirements:</h4> <ul> ...

Step-by-Step Guide on Retrieving Filtered Data using React Context API

Currently, I am in the process of developing a dashboard application using React.js, React Context API, and ApexCharts. The app will visualize a 1000-length JSON data on 7-8 different charts, along with 6-7 variable filters. Overview of the App Structure: ...

transfer data from local array to global variable

Need help with returning array values using console.log(array);, currently it's displaying empty value []. Any tips or suggestions would be greatly appreciated. var array = []; var maxLength = 3; var delay = 250; //Shortened the delay var ticker = {}; ...

Utilize JavaScript declarations on dynamically added strings during Ajax loading

Is there a way to append HTML strings to the page while ensuring that JavaScript functions and definitions are applied correctly? I have encountered a confusing issue where I have multiple HTML elements that need to be interpreted by JavaScript. Take, for ...

issue arises when attempting to use the implemented function in multiple components simultaneously

There is a registered area in my app where, upon successful login, a global variable "auth" is set to "loggedin". In the main Vue component App.vue, I load the header component containing the navbar and router view. The created function in the header compo ...

Initiate an AJAX call with various data formats included

I am currently developing an application that allows users to input values through an interface and send AJAX requests (similar to a REST API). My question pertains to sending data of multiple types in a single request. For example, here is a scenario: F ...

Rows in a table will not decrease when added anew

On a page that allows adding and deleting rows from a table of input fields, the following code functions properly for existing fields. However, when attempting to add new rows and delete them in a sequential manner that requires replacing the ID and name ...

Is there a way to search through an array of object arrays in JavaScript for a specific key/value pair using lodash or any other function?

I am faced with a task involving an array of objects. Each object has a key that needs to be used to search through sets of arrays containing similar objects. The goal is to determine if all the arrays contain the same value for a specific key in my object ...

How to resolve useState problem in useEffect when state is not null

Encountering issues with maintaining state in TypeScript React. A Child component passes a 'terminal' object to the Parent via a function called returnTerminal(). This 'terminal' object is then stored as a useState variable named _obje ...

"Utilizing the power of Twitter Bootstrap and Snap.js for

I am currently working on integrating Snap.js by jakiestfu with Twitter Bootstrap. I have managed to make it work to some extent (I can slide the content and open a drawer through a click event). However, I am facing a challenge where the drawer content re ...

I have a quick question: What is the most effective method for creating PDF templates with Angular and .NET 6, specifically for designs that feature heavy

Seeking the optimal solution for creating PDF templates using Angular and .NET 6? Specifically looking to design templates that heavily feature tables. In my exploration of efficient PDF template creation with Angular and .NET 6, I ventured into using pdf ...

Unable to retrieve the value from the selected radio button

Below is the provided HTML: <form> <div class="form-group"> <div class="checkbox-detailed male_input"> <input type="radio" name="gender" id="male" value="male"> <label for="male"> ...

Tips for efficiently importing a file or folder that is valuable but not currently in use

I'm struggling to find any information about this particular case online. Perhaps someone here might have some insight. I keep getting a warning message saying 'FournisseursDb' is defined but never used no-unused-vars when I try to import t ...

What is the best way to eliminate the "onclick" attribute from an HTML element using JavaScript?

Is there a way to make my code only execute the onlick function after a button is pressed? I want to prevent any action from happening before that. <!-- deactivate onclick function --> <div class="boardsection2" id="2_8_7" oncl ...

Variables for NPM Configuration

After researching the best way to securely store sensitive information, I decided to utilize the config package and environment variables for added security. Here is how I implemented this setup: Created a config directory containing two files: default.js ...

Issues arise with User obj's utilization of the Instagram API

After setting up my Instagram developer account, I was able to obtain the client_secret and client_id. Authentication went smoothly for my own user (myusername), and I received an access_token. However, when attempting to utilize this endpoint TOKEN] Fo ...

Utilizing Snowpack to implement private class methods in JavaScript

In my front-end development, I utilize private JavaScript class methods and Snowpack for my workflow. Unfortunately, I've encountered an issue with Snowpack (as of v2.15.0-pre.5) not supporting private class methods. When trying to build using snowpa ...

JavaScript Tip: Effortless method to confirm the presence of duplicate values within an array

Similar Question: Best method for identifying duplicate values in a JavaScript array If I have an extensive array containing thousands of elements, I am looking to check if there are 2 or more elements with identical values and return true. I unders ...

Navigating through Sails.Js: A Guide to Implementing Pagination

Looking to implement paginated tables in your application using sails.js, mongodb, and waterline-ORM? Wondering if there is a recommended method for pagination in sails.js? ...

The Challenge of Azure App Service Connection Timeouts

We are currently facing an issue with our Azure App Service, which is built in C# .NET 4.7. The application works perfectly fine when running locally, but encounters an error upon publishing to Azure. The error message returned to the client (web UI develo ...