Cannot pass multiple arguments in vuex actions

Question

I'm trying to call vuex action in vue component with multiple parameters. But in action method cannot access these passed arguments.

I have already tried passing value in payload as object which is mostly suggested here. but still it is not working.

Please look for

  this.getMessageFromServer(payload); 

MessageBox.vue

import Vue from 'vue';
import { mapGetters, mapActions } from 'vuex';
import MessageView from './MessageView.vue';

export default Vue.component('message-box',{
components:{
    MessageView
},
data() {
    return {
        messageList :[],
    }
},
created() {
    this.fetchTimeMessage();
    console.log("reaching inside ");
},
computed:{
    ...mapGetters(['getMessage','getActiveMessageData']),    
    ...mapActions(['getMessageFromServer']),
},
methods: {
    fetchTimeMessage:function(){     
         console.log("fetchTimeMessage : ");
        
        var messageUser = this.getMessage.findIndex((e) => e.muid == this.getActiveMessageData.id);
         console.log("fetchTimeMessage : " , {messageUser});

          if (messageUser == -1) {
                let user_id = this.getActiveMessageData.id;
                let user_type = this.getActiveMessageData.type;

                console.log("inside fetch Message : " + user_id);
                console.log("inside fetch Message : " + user_type);
                
                const payload = {
                    'uType': user_type,
                    'uid' : user_id,
                    'limit': 50
                };

               this.getMessageFromServer(payload);
        }
    },
},
});

Vuex modules message.js

const state = {
    messages:[],
    activeMessage : {}
};

const getters = {

    getActiveUserId: (state) => {
            let activeUserId = "";

        if (!utils.isEmpty(state.activeMessage)) {
            activeUserId = state.activeMessage.id;
        }

        return activeUserId;
       },

       getActiveMessage:(state) => { return !utils.isEmpty(state.activeMessage);},

       getActiveMessageData : (state) => {return state.activeMessage } , 
       getMessage: (state) => {return state.messages},
};

const actions = {
    getMessageFromServer({ commit, state },{utype,uid,limit}){

        console.log("mesage callback asdas : " + uid);
        let messageRequest = CCManager.messageRequestBuilder(utype, uid, limit);
        
        messageRequest.fetchPrevious().then(messages => {
        
            //console.log("mesage callback : " + JSON.stringify(messages));
            // handle list of messages received
            let payload = {
                'messsages':messages,
                'id': uid
            };
            console.log("inside action_view : " + JSON.stringify(payload));

            //commit('updateMessageList',payload);
        })
    },

    setActiveMessages:function({commit},data){
        commit('updateActiveMessage',data);
    }, 
};

const mutations = {
    updateMessageList(state,{messages,id}){
        console.log("action details" + id);
             
                //uid is not present
                var tempObj = {
                    'muid' : id,
                    'message' : messages
                }

                 state.messages.push(tempObj);      
            } 
    },

    updateActiveMessage(state,action){
        state.activeMessage = {
            type: action.type,
            id: action.uid
        };
    }
};

export default {
    state,
    getters,
    actions,
    mutations
};

Answer 1

Change the way you call the action in your component:

 this.$store.dispatch('getMessageFromServer', payload);

And pass the payload as a single object in your action function:

getMessageFromServer({ commit, state }, payload)

And you can then access the payload properties in the action like this:

getMessageFromServer({ commit, state }, payload) {
   var uid = payload.uid;
   var uType = payload.uType;
   var limit = payload.limit;
}