Question

我正在尝试使用多个参数在vue组件中调用vuex动作。但实际上，方法无法访问这些传递的参数。

我已经尝试过将有效载荷中的值作为对象传递，这在这里主要建议使用。但仍然无法正常工作。

请寻找

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

无法在vuex操作中传递多个参数

1 个答案: