Vuex - Übergabe mehrerer Parameter an die Mutation

123

Ich versuche, einen Benutzer mit vuejs und laravels Pass zu authentifizieren.

Ich kann nicht herausfinden, wie mehrere Parameter über eine Aktion an die Vuex-Mutation gesendet werden können.

- Geschäft -

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

- Anmeldemethode -

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



Ich wäre für jede Art von Hilfe sehr dankbar!

Schwesi
quelle

Antworten:

171

Mutationen erwarten zwei Argumente: stateund payload, wobei der aktuelle Status des Speichers von Vuex selbst als erstes Argument übergeben wird und das zweite Argument alle Parameter enthält, die Sie übergeben müssen.

Der einfachste Weg, eine Reihe von Parametern zu übergeben, besteht darin, sie zu zerstören :

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

Dann später in Ihren Aktionen können Sie einfach

store.commit('authenticate', {
    token,
    expiration,
});
Nit
quelle
Das zweite Argument wird nicht erwartet , es ist optional.
Digout
Wofür die Parameteraction
Idris Stack
108

In einfachen Worten müssen Sie Ihre Nutzdaten in ein Schlüsselarray einbauen

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

Senden Sie dann die Nutzdaten direkt an die Aktion

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

Keine Änderung in Ihrer Aktion

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

Rufen Sie in Ihrer Mutation die Werte mit dem Schlüssel auf

'YOUR_MUTATION' (state,  payload ){
  state.state1 = payload.key1
  state.state2 =  payload.key2
},
Peterretief
quelle
2
Danke dir. Genau das habe ich gesucht
BoundForGlory
Ich habe den Prozess vereinfacht, weil ich ihn verwirrend fand und froh war, helfen zu können
Peterretief
1
zur einfachen Verwendung können Sie nach ES6 'YOUR_MUTATION' (state, {key1, key2}) {state.state1 = key1 state.state2 = key2},
pabloRN
3

Ich denke, dies kann so einfach sein, als würde man annehmen, dass Sie mehrere Parameter an Ihre Aktion übergeben werden, während Sie dort nachlesen. Aktionen akzeptieren nur zwei Parameter contextund payloadwelche Daten Sie in Aktion übergeben möchten. Nehmen wir also ein Beispiel

Aktion einrichten

anstatt

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

machen

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

Aktion aufrufen (versenden)

anstatt

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

machen

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

Ich hoffe, das wird helfen

liberi
quelle