Vuex: passaggio di più parametri alla mutazione

126

Sto cercando di autenticare un utente utilizzando vuejs e il passaporto di laravel.

Non sono in grado di capire come inviare più parametri alla mutazione vuex tramite un'azione.

- negozio -

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

- metodo di accesso -

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

Sarei molto grato per qualsiasi tipo di aiuto!

vue.js vuejs2 vuex

— Schwesi
fonte

172

Le mutazioni prevedono due argomenti: stateepayload , dove lo stato corrente del negozio viene passato da Vuex stesso come primo argomento e il secondo argomento contiene tutti i parametri che devi passare.

Il modo più semplice per passare una serie di parametri è distruggerli :

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

Poi più avanti nelle tue azioni puoi semplicemente

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

— lendine
fonte

Non si aspetta il secondo argomento, è opzionale.

— digout

A cosa servono i parametriaction

— Idris Stack

108

In termini semplici, devi creare il tuo payload in un array di chiavi

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

Quindi invia il payload direttamente all'azione

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

Nessun cambiamento nella tua azione

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

Nella tua mutazione chiama i valori con la chiave

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

— peterretief
fonte

2

Grazie. Questo è esattamente quello che stavo cercando

— BoundForGlory

Ho semplificato il processo perché lo trovavo confuso, felice di essere in grado di aiutare

— peterretief

1

per un utilizzo semplice puoi farlo dopo ES6 "YOUR_MUTATION" (state, {key1, key2}) {state.state1 = key1 state.state2 = key2},

— pabloRN

3

penso che questo possa essere tanto semplice supponiamo che tu stia per passare più parametri alla tua azione mentre leggi le azioni accettano solo due parametri contexte payloadquali sono i tuoi dati che vuoi passare in azione quindi facciamo un esempio

Impostazione dell'azione

invece di

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

fare

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

Chiamare (dispacciare) l'azione

invece di

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

fare

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

spero che questo possa aiutare

— Liberi
fonte