Vuex - passer plusieurs paramètres à la mutation

J'essaie d'authentifier un utilisateur en utilisant vuejs et le passeport de laravel.

Je ne suis pas en mesure de comprendre comment envoyer plusieurs paramètres à la mutation vuex via une action.

- boutique -

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éthode de connexion -

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

Je serais très reconnaissant pour toute sorte d'aide!

Les mutations attendent deux arguments: stateet payload, où l'état actuel du magasin est passé par Vuex lui-même comme premier argument et le deuxième argument contient tous les paramètres que vous devez passer.

Le moyen le plus simple de transmettre un certain nombre de paramètres est de les détruire :

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

Ensuite, plus tard dans vos actions, vous pouvez simplement

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

En termes simples, vous devez créer votre charge utile dans un tableau de clés

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

Envoyez ensuite la charge utile directement à l'action

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

Aucun changement dans votre action

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

Dans ta mutation appelle les valeurs avec la clé

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

Je pense que cela peut être aussi simple que de supposer que vous allez passer plusieurs paramètres à votre action lorsque vous lisez là-haut, les actions n'acceptent que deux paramètres contextet payloadquelles sont vos données que vous voulez passer en action, alors prenons un exemple

Configuration de l'action

au lieu de

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

faire

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

Action d'appel (répartition)

au lieu de

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

faire

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

j'espère que ça va aider