vuex 작업에서 여러 인수를 전달할 수 없음

vuex 작업에서 여러 인수를 전달할 수 없음

여러 매개 변수를 사용하여 vue 구성 요소에서 vuex 작업을 호출하려고 합니다.그러나 실제로 메서드는 이러한 전달된 인수에 액세스할 수 없습니다.

이미 payload의 값을 여기서 주로 제안하는 오브젝트로 전달하려고 시도했지만 여전히 작동하지 않습니다.

찾아주세요

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 ");
},

watch: {

},

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



                var payload = {
                    'uType': user_type,
                    'uid' : user_id,
                    'limit': 50
                };

               this.getMessageFromServer(payload);


        }

    },


},



});

Vuex 모듈메시지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
};

구성 요소에서 작업을 호출하는 방법을 변경합니다.

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

액션 함수에서 페이로드를 단일 개체로 전달합니다.

getMessageFromServer({ commit, state }, payload)

그런 다음 다음과 같은 액션으로 payload 속성에 액세스할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/56219512/cannot-pass-multiple-arguments-in-vuex-actions