Vuex - passage de plusieurs paramètres à la mutation

Question

J'essaie d'authentifier un utilisateur en utilisant Vuejs et le passeport de Laravel.

Je n'arrive pas à comprendre comment envoyer plusieurs paramètres à la mutation vuex via une action.

- magasin -

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 forme d'aide !

Answer 1

Les mutations attendent deux arguments : state y payload où l'état actuel du magasin est transmis par Vuex lui-même comme premier argument et le second argument contient tous les paramètres que vous devez transmettre.

Le moyen le plus simple de passer 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,
});

Answer 2

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

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

Ensuite, envoyez la charge utile directement à l'action

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

Aucun changement dans votre action

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

Dans votre mutation, appelez les valeurs avec la clé

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

Answer 3

Je pense que cela peut être aussi simple supposons que vous allez passer plusieurs paramètres à votre action, comme vous l'avez lu, les actions n'acceptent que deux paramètres. context y payload qui est votre donnée que vous voulez passer dans l'action donc prenons un exemple

Mise en place de l'action

au lieu de

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

hacer

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

Action d'appel (dispatching)

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

J'espère que cela va aider