How can i pass parameters from method to action in vuejs vuex

Question

I have to files with this code:

Users.vue

methods: {
obtenerUsuarios() {
  console.log('Obtener Usuarios')
  this.$store
    .dispatch('auth/getValidToken')
    .then((data) => {
      console.log(data). // Console First Message
      this.$store
        .dispatch('user/fetchUsers', data)
        .then((response) => {
          this.items = response.data
        })
        .catch((error) => {
          console.log(error)
        })
    })
    .catch((error) => {
      console.log('Error: ' + error)
    })
},

},

Console Firsts Mesagge show me a json web token in console that is ok. When i dispatch 'user/fetchUsers in

user.js

export const actions = {
    fetchUsers({ jwt }) {
    console.log('Action JWT:' + jwt)  //Second console.log
    return UserService.getUsers(jwt)
  },
}

The second messaje show me: Action JWT:undefined in the console

if i change the line two to

fetchUsers(jwt) {

The second messaje show me: Action JwT:[object Object]

I need to pass a json web token from Users.vue method to fetchUsers action y user.js

I will to appreciate any help

Jose Rodriguez

What does jwt show if you do fetchUsers(jwt) { console.log(jwt) }? — Hides
– Hides, Commented Apr 28, 2020 at 22:00
Hi, jwt show {getters: {…}, state: {…}, rootGetters: {…}, dispatch: ƒ, commit: ƒ, …} — Pillo
– Pillo, Commented Apr 28, 2020 at 22:03
getValidToken() { const user = JSON.parse(localStorage.getItem('user')) const time = user.created const now = new Date().getTime() var sec_diff = (now - time) / 1000 const remainingTime = 1800 - sec_diff if (remainingTime > 60) { //return jwt return user.jwt } return remainingTime // request jwt }, — Pillo
– Pillo, Commented Apr 28, 2020 at 22:11
getValidToken returns a valid token as i expect, the problem is how can i pas from the method to the action — Pillo
– Pillo, Commented Apr 28, 2020 at 22:12

tony19 · Accepted Answer · 2020-04-29 03:03:06Z

2

Your action method currently declares the data in the first argument (and no second argument), but actions receive the Vuex context as its first argument. The data payload is in the second argument:

const actions = {
  //fetchUsers(data) {}        // DON'T DO THIS (1st arg is for context)
  fetchUsers(context, data) {}
}

answered Apr 29, 2020 at 3:03

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i pass parameters from method to action in vuejs vuex

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related