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
})