Vuex - passer plusieurs paramètres à la mutation

126

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!

Schwesi
la source

Réponses:

172

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,
});
Lente
la source
Il n'a pas attendre le deuxième argument, il est facultatif.
digout
À quoi servent les paramètresaction
Idris Stack
110

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
},
peterretief
la source
2
Je vous remercie. C'est exactement ce que je cherchais
BoundForGlory
J'ai simplifié le processus car je trouvais cela déroutant, heureux de pouvoir aider
peterretief
1
pour une utilisation simple, vous pouvez le faire après ES6 'YOUR_MUTATION' (state, {key1, key2}) {state.state1 = key1 state.state2 = key2},
pabloRN
3

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

liberi
la source