Vuex - passing multiple parameters to mutation

Question

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    gt  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   gt             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

User · Answer

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

User · Answer

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 store commit  authenticate         token      expiration

User · Answer

i think this can be as simple let as assume that you are going to pass multiple parameters to you action as you read up there actions accept only two parameters context and payload which is your data you want to pass in action so let take an example Setting up Action instead of actions            authenticate     commit    token  expiration    gt  commit  authenticate   token  expiration         do actions            authenticate     commit     token  expiration     gt  commit  authenticate   token  expiration         Calling  dispatching  Action instead of this  store dispatch                     type   authenticate                     token  response body access token                    expiration  response body expires in   Date now                     do this  store dispatch  authenticate                      token  response body access token                    expiration  response body expires in   Date now                     hope this gonna help

[vue.js] Vuex - passing multiple parameters to mutation

Examples related to vue.js

Examples related to vuejs2

Examples related to vuex