Vuex: pasar múltiples parámetros a la mutación


124

Estoy tratando de autenticar a un usuario usando vuejs y el pasaporte de laravel.

No puedo averiguar cómo enviar múltiples parámetros a la mutación vuex a través de una acción.

- Tienda -

export default new Vuex.Store({
    state: {
        isAuth: !!localStorage.getItem('token')
    },
    getters: {
        isLoggedIn(state) {
            return state.isAuth
        }
    },
    mutations: {
        authenticate(token, expiration) {
            localStorage.setItem('token', token)
            localStorage.setItem('expiration', expiration)
        }
    },
    actions: {
        authenticate: ({ commit }, token, expiration) => commit('authenticate', token, expiration)
    }
})

- método de inicio de sesión -

login() {
      var data = {
           client_id: 2,
           client_secret: '**************************',
           grant_type: 'password',
           username: this.email,
           password: this.password
      }
      // send data
      this.$http.post('oauth/token', data)
          .then(response => {
              // send the parameters to the action
              this.$store.dispatch({
                  type: 'authenticate',
                  token: response.body.access_token,
                  expiration: response.body.expires_in + Date.now()
              })
     })
}



¡Estaría muy agradecido por cualquier tipo de ayuda!

Respuestas:


172

Las mutaciones esperan dos argumentos: statey payload, donde Vuex pasa el estado actual de la tienda como primer argumento y el segundo contiene los parámetros que necesita pasar.

La forma más sencilla de pasar una serie de parámetros es destruirlos :

mutations: {
    authenticate(state, { token, expiration }) {
        localStorage.setItem('token', token);
        localStorage.setItem('expiration', expiration);
    }
}

Luego, más adelante en tus acciones, puedes simplemente

store.commit('authenticate', {
    token,
    expiration,
});

No espera el segundo argumento, es opcional.
excavación

Para qué sirven los parámetrosaction
Idris Stack

108

En términos simples, necesita construir su carga útil en una matriz de claves

payload = {'key1': 'value1', 'key2': 'value2'}

Luego envíe la carga útil directamente a la acción

this.$store.dispatch('yourAction', payload)

Sin cambios en tu acción

yourAction: ({commit}, payload) => {
  commit('YOUR_MUTATION',  payload )
},

En tu mutación llama a los valores con la clave

'YOUR_MUTATION' (state,  payload ){
  state.state1 = payload.key1
  state.state2 =  payload.key2
},

2
Gracias. Esto es exactamente lo que estaba buscando
BoundForGlory

Simplifiqué el proceso porque lo encontré confuso, me alegro de poder ayudar
Peterretief

1
para un uso simple que puede hacer después de ES6 'YOUR_MUTATION' (estado, {clave1, clave2}) {estado.state1 = clave1 estado.state2 = clave2},
pabloRN

3

Creo que esto puede ser tan simple, supongamos que va a pasar varios parámetros a su acción a medida que lee, las acciones aceptan solo dos parámetros contexty payloadcuáles son sus datos que desea pasar en acción, así que tomemos un ejemplo

Configurar acción

en vez de

actions: {
        authenticate: ({ commit }, token, expiration) => commit('authenticate', token, expiration)
    }

hacer

actions: {
        authenticate: ({ commit }, {token, expiration}) => commit('authenticate', token, expiration)
    }

Acción de llamada (despacho)

en vez de

this.$store.dispatch({
                  type: 'authenticate',
                  token: response.body.access_token,
                  expiration: response.body.expires_in + Date.now()
              })

hacer

this.$store.dispatch('authenticate',{
                  token: response.body.access_token,
                  expiration: response.body.expires_in + Date.now()
              })

espero que esto ayude

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.