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!

Schwesi
fuente

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,
});
Liendre
fuente
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
},
Peterretief
fuente
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

liberi
fuente