Vuex - passing multiple parameters to action

问题

I am trying to authenticate a user using vuejs and laravel's passport.

I am not able to figure out how to send multiple parameters to the vuex mutation via an action.

- store -

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

- login method -

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

I would be very thankful for any kind of help!

回答1:

Mutations expect two arguments: state and payload, where the current state of the store is passed by Vuex itself as the first argument and the second argument holds any parameters you need to pass.
The easiest way to pass a number of parameters is to destruct them:

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

Then later on in your actions you can simply

commit('authenticate', {
    token,
    expiration
})

回答2:

In simple terms you need to build your payload into a key array

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

Then send the payload directly to the action

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

No change in your action

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

In your mutation call the values with the key

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

来源：https://stackoverflow.com/questions/46097687/vuex-passing-multiple-parameters-to-action