vue.js - props - Vuex: pasar múltiples parámetros a la acción

vuex actions

Question

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

No puedo descubrir 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!

Answer 1

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

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

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

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

no hay cambio en tu acción

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

en tu mutación llama a los valores con la tecla

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

},

Answer 2

Las mutaciones esperan dos argumentos: state y payload , donde Vuex pasa el estado actual de la tienda como el primer argumento y el segundo argumento contiene los parámetros que necesita pasar.
La forma más fácil 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

commit(''authenticate'', {
token,
expiration
})