[Vuejs]-Export default new Vuex.Store and Mutations

by

0👍

✅

I believe you have mistyped. It should be commit and not commmit.

EDIT: Seeing the file, please try using arrow functions instead.

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);
  });

This is because you will lose the context of this without it. With arrow functions, this remains the this from the outer context. Also, not sure if you need this in this particular case, but try with or without it. ( I said this too many times )

👤Danijel

0👍

Note the signature of your action method is incorrect. The Vuex docs show that the action method takes the Vuex context (which contains the commit method) as the first parameter and the payload second:

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

With your current code, you’ll notice that payload.username and payload.password are undefined.

demo of your action with the bug

Your action method should look like this:

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

demo of fix

👤tony19

Leave a comment