vuex dispatch action with params but got null params value

Question

I am trying to create action in my vuex , that action has method to goLogin with parameter the object of email and password, in this case I am using Nuxt, when I try to use fetch in my component, the dispatch work well with that params, but when I try to move it as method for @click, the dispatch params is null thought I console log inside the action method, it was not null, but when it hit to back end API, back end API read it as null

here is my action: in store/login.js

export const actions = {
  goLogin({ commit }, obj) {
    // I console.log the obj here, it was not null
    return LoginService.tryLogin(obj).then((res) => {
      commit("IS_LOGIN", res.data);
    }).catch(e => {
      commit("IS_LOGIN", e.response.data);
    })
  }
}

the LoginService got it from instance axios, it is like this

tryLogin(obj) {
  // I console.log the obj here, it was not null
  return goAxios.get("/login", {
    data : obj,
  })
}

in my component method for @click login

async tryLoginFromComponent() {
  await this.$store.dispatch("login/goLogin",{
    "email": "[email protected]",
    "password": "12345678",
  })
},

when I click login, the methop of tryLoginFromComponent run and it going to action in store/login.js but the obj of that params null in back end, thought I console.log was not ,

is that something wrong with I did above ?? I have tried to search all day but can't found any work for me , I hope everybody here will save my time what's going there

What do you see in the Network tab of the developer tools? Is the request correct at that point and, if not, how does it differ from what it should be? — skirtle
Using data with a GET request is unlikely to be what you want. Either it should be a POST or that should be params instead of data. — skirtle
@skirtle on the network it was nothing on the body data, it was correct to hit the api, do u usually POST for login ?? — iuer ui
Personally I wouldn't use a GET request for login, not least because it has side-effects. But the key point here is that you're using axios incorrectly. Passing a data option to the get method won't do anything. If the server is using a GET request then you'll need to use params instead. — skirtle

Effection Effection · Accepted Answer · 2019-10-29T17:53:08

You don't have to call tryLoginFromComponent asynchronously because actions are already asynchronously. Maybe there is an issue.

vuex dispatch action with params but got null params value

2 Answers