Vuex - Übergabe mehrerer Parameter an die Mutation

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!

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

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

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