create a new Vuex.Store and include Mutations

Question

create a new Vuex.Store and include Mutations

Having trouble using the commit method as described here. I suspect it's because I'm using export default new Vuex.Store instead of

export const store = new Vuex.Store

. However, when I make this change, I encounter an issue similar to the one in this post.

You can find my JS file where I'm utilizing Vuex and trying to use commit here:

actions: {
  signUserIn(payload) {
    payload.password;
    var params = new URLSearchParams();
    params.append("grant_type", "password");
    params.append("username", "admin");
    params.append("password", "adminPassword");
    axios({
      method: "post",
      url: "http://localhost:8090/oauth/token",
      auth: { username: "my-trusted-client", password: "secret" },
      headers: {
        "Content-type": "application/x-www-form-urlencoded; charset=utf-8"
      },
      data: params
    }).then(function(response) {
      const user = {
        login: payload.username
      };
      localStorage.setItem("access_token", response.data.access_token);
      this.commit("setUser", user);
    });
  }
},

When attempting to run this code and call signUserIn, I receive the following error in the console:

TypeError: Cannot read property 'commmit' of undefined

I'm not sure what keywords to search for to resolve this issue.

javascript vue.js vuex

Answer 1

Answer №1

It seems like there may have been a typo. The correct syntax should be commit instead of commmit.

UPDATE: After reviewing the file, I suggest using arrow functions for better efficiency.

axios({
    method: "post",
    url: "http://localhost:8090/oauth/token",
    auth: { username: "my-trusted-client", password: "secret" },
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=utf-8"
    },
    data: params
  }).then(response => {
    const user = {
      login: payload.username
    };
    localStorage.setItem("access_token", response.data.access_token);
    this.commit("setUser", user);
  });

The reason for using arrow functions is to maintain the context of this. Using arrow functions ensures that this remains consistent with the outer context. It's worth experimenting both with and without `this` in your specific scenario. (I might have mentioned 'this' quite a lot)

Answer 2

It seems like there may have been a typo. The correct syntax should be commit instead of commmit.

UPDATE: After reviewing the file, I suggest using arrow functions for better efficiency.

axios({
    method: "post",
    url: "http://localhost:8090/oauth/token",
    auth: { username: "my-trusted-client", password: "secret" },
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=utf-8"
    },
    data: params
  }).then(response => {
    const user = {
      login: payload.username
    };
    localStorage.setItem("access_token", response.data.access_token);
    this.commit("setUser", user);
  });

The reason for using arrow functions is to maintain the context of this. Using arrow functions ensures that this remains consistent with the outer context. It's worth experimenting both with and without `this` in your specific scenario. (I might have mentioned 'this' quite a lot)

Answer 3

Answer №2

Your action method needs to be updated with the correct signature. Take a look at the Vuex documentation, which specifies that the action method should take the Vuex context as the first parameter and the payload as the second:

// signUserIn(payload) { // DON'T DO THIS
signUserIn(context, payload) {

If you stick with your current code, you'll find that both payload.username and payload.password are undefined.

Check out this demo showcasing the bug in your action.

To resolve this issue, update your action method to resemble the following structure:

actions: {
  signUserIn(context, payload) {
    axios.post().then(response => {
      context.commit('foo', foo);
    });
  }
}

Here's a demo demonstrating the fix.

Answer 4

Your action method needs to be updated with the correct signature. Take a look at the Vuex documentation, which specifies that the action method should take the Vuex context as the first parameter and the payload as the second:

// signUserIn(payload) { // DON'T DO THIS
signUserIn(context, payload) {

If you stick with your current code, you'll find that both payload.username and payload.password are undefined.

Check out this demo showcasing the bug in your action.

To resolve this issue, update your action method to resemble the following structure:

actions: {
  signUserIn(context, payload) {
    axios.post().then(response => {
      context.commit('foo', foo);
    });
  }
}

Here's a demo demonstrating the fix.

create a new Vuex.Store and include Mutations

Answer №1

Answer №2

Similar questions

Send a troublesome string from the client to the server and receive the identical string in return

The slow loading time of the website can be attributed to the excessive loading time of over 30 seconds due

Eliminate the listener if the connected function contains a binding

What is the best way to pass data from a parent component to a child component and utilize it within a function in Next.js

Integrating Mailchimp with MongoDB and Node.js

Executing JavaScript when a specific portion of a webpage loads in the presence of AJAX: A guide

Preflight request denied due to access control failure. No 'Access-Control-Allow-Origin' header present

Retrieve and update the most recent entry

Leveraging python capabilities within html documents

When implementing afui and jQuery on PhoneGap, an error was encountered: "TypeError: Cannot read property 'touchLayer' of object function (selector, context)"

Error encountered in Angular JS: $parse:syntax Syntax Error detected

Struggling with uploading a Vue project to Github Pages

Guide on linking draggable elements

Tips for creating a fixed footer that adjusts with a flexible wrapper

Why does ng-bind fail to display values from rootScope that have been set by using ng-click?

Dragging elements with jQueryUI multiple times

The function to save a mongoose schema is not valid

beforeprinting() and afterprinting() function counterparts for non-IE browsers

Vuetify Error - "Attempting to access 'extend' property of an undefined object"

Angular: Radio button groups are not responding correctly when populated within a loop using ng-repeat