2

Me he dado cuenta de que los métodos en Vuex (desde mutations) siempre me retornan un [Object Promise], ¿No hay manera de usar métodos no asincronos en Vuex?

Tengo un método que se encarga de hacer un repaso a una lista de usuarios, encontrar al que tenga la ID proporcionada como parámetro

/*Este metodo esta en mutations (Vuex)*/
findUser(state, userId: number){
      let user: object = {}
        for(let actualUser of state.users){
          if (actualUser.id == userId){
            user = actualUser
          }
        }
      return user
}

A la hora de llamar a este método (que pasa por una acción), siempre recibo de vuelta un "[Object Promise]", ¿Por qué ocurre esto?

8
  • Puedes publicar tu código? Ya que asi es más fácil ayudarte.
    – milmal
    Commented el 29 nov. 2020 a las 9:38
  • Las mutations son para modificar el state, no para retornar algo. vuex.vuejs.org/guide/mutations.html Commented el 29 nov. 2020 a las 14:33
  • @porloscerrosΨ Si eso es cierto, significaría que para retornar datos del state debería usar actions, ¿Verdad? Commented el 29 nov. 2020 a las 17:00
  • Mmm... Para obtener datos del state puedes usar getters o directamente el state. No entiendo a que te refieres con retornar. Commented el 29 nov. 2020 a las 17:07
  • 1
    Te diría que agregues al state una variable para guardar el usuario encontrado, por ejemplo actualUser. Entonces en la mutación, haces state.actualUser = actualUser. Luego en un componente obtienes el actualUser del state Commented el 29 nov. 2020 a las 18:25

1 respuesta 1

3

no se cuanta experiencia tienes en Vue, pero justamente la separacion de la logica de Vuex es para evitar lo que te esta sucediendo.

Si vas a leer el estado debes usar getters. Luego en los componentes para simplificar la logica puedes usar mapGetters de vuex y los lees desde las propiedades computadas.

Las mutaciones hacen eso, mutar el state, de manera que no lo debes usar como lo estas usando, esta bien que la accion lo llame para alterar el state, pero repito, los valores del state los debes "mostrar" usando getters.

Lo ideal seria que en tu store tengas:

state: {
    users: [{...},{...}], // Aqui todos tus usuarios,
    user:null, // aqui el usuario seleccionado
},

getters: {
    user: state => state.user
},

mutations: {
    setUser(state, payload) {
         state.user = payload // aqui solo se debe afectar a la variable del state.
    }
},

actions: {
    findUser({commit, state}, userId){
        user = state.users.filter(u => u.id == userId) // Asumimos que cada usuario es unico.

        if (user.length) {
            commit('setUser', user[0]) // si encuenta uno actualizamos la variable del estado.
        }
    }
}

Espero que te sea util.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.