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

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) => commit('authenticate', token, expiration)
    }

do

actions: {
        authenticate: ({ commit }, {token, expiration}) => 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

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

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

Examples related to vue.js

Examples related to vuejs2

Examples related to vuex