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

Possible duplicate of [Vuex - passing multiple parameters to action](https://stackoverflow.com/questions/46097687/vuex-passing-multiple-parameters-to-action) — James Whiteley, May 20 '19 at 10:58
@james, I am trying to send multiple arguments to action , not to mutation. And I tried suggested solution of passing as object. So please can you tell what did I do wrong here ? — Kshitiz shakya, May 20 '19 at 11:11
Yes, I tried those too.. unfortunately I am getting no success there too.. — Kshitiz shakya, May 20 '19 at 11:21

score 3 · Accepted Answer · edited Sep 03 '20 at 05:32

3

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

edited Sep 03 '20 at 05:32

ci0ccarellia

795
9
26

answered May 20 '19 at 11:11

Kris D. J.

612
2
7
16

Have you tested if user_id isn't undefined when you set it in your component? – Kris D. J. May 20 '19 at 11:20
Yes, i console.log uid and other parameters before passing to action – Kshitiz shakya May 20 '19 at 11:38
In your component change the way you call your action. Change this: "this.getMessageFromServer()" to this "this.$store.dispatch('getMessageFromServer', payload)" – Kris D. J. May 20 '19 at 11:49
Let me try and get back to you – Kshitiz shakya May 20 '19 at 11:54
really sorry for delayed response.. and yes it worked .... I really don't know how this time it work, I swear I tried calling action without helper before and even payload were inaccessible.. and that didn't work that time.. but finally it is working.. thank you @kris – Kshitiz shakya May 22 '19 at 13:19

Cannot pass multiple arguments in vuex actions

1 Answers1