onSucess returns undefined for metadata param when inside Vue view but not inside component

Question

I have a vue component that is for Plaid Link that calls a function/action in my Vuex store named onSuccess that should call my backend API to exchange the public token for an access token and send some data about the link to the backend. However it seems like the metadata param is coming back as undefined when console.log() inside my Vuex store but if I do it inside the component itself I have no issues.

Vuex code

onSuccess({ commit }, public_token, metadata) {
        console.log(public_token, metadata)
        commit('SET_PUBLIC_TOKEN', public_token);
        return new Promise((resolve, reject) => {
            Vue.axios.post('/plaid/exchange_public_token', {
                public_token,
            })
            .then(() => {
                resolve();
            })
            .catch((error) => {
                reject(error);
            });
        })
    },

Code inside my view script section

computed: {
            ...mapState({
                plaid: state => state.plaid
            })
        }, 
        
        methods: {
            ...mapActions({
                onLoad: 'onLoad',
                onExit: 'onExit',
                onEvent: 'onEvent',
                onSuccess: 'onSuccess',
            }),
            
        },

        mounted() {
            this.onLoad();
        },

Code inside my view template section

 <PlaidLink
                clientName="Plaid App"
                env="sandbox"
                :link_token="plaid.link_token"
                :products="['auth','transactions']"
                :onLoad='onLoad'
                :onSuccess='onSuccess'
                :onExit='onExit'
                :onEvent='onEvent'
                >

Code inside my component that is for plaid.create with other helper functions removed

this.linkHandler = this.plaid.create({
            clientName: this.clientName,
            env: this.env,
            isWebview: this.isWebview,
            key: this.public_key,
            product: this.products,
            receivedRedirectUri: this.receivedRedirectUri,
            token: this.link_token,
            webhook: this.webhook,
            onLoad: function() {
              // Optional, called when Link loads
              self.onLoad()
            },
            onSuccess: function(public_token, metadata) {
              // Send the public_token to your app server.
              // The metadata object contains info about the institution the
              // user selected and the account ID or IDs, if the
              // Select Account view is enabled.
              /* eslint-disable no-console */
              console.log(metadata)
              self.onSuccess(public_token, metadata)
            },
            onExit: function(err, metadata) {
              // Storing this information can be helpful for support.
              self.onExit(err, metadata)
            },
            onEvent: function(eventName, metadata) {
              self.onEvent(eventName, metadata)
            }
          });

Answer 1

Vuex actions and mutations can have 1 optional payload parameter, see the usage. In case there's a need to pass multiple values, they need to be the properties of payload object.

In order to make it concise, use object literal shorthand syntax:

self.onSuccess({ public_token, metadata })

And object destructuring syntax:

onSuccess({ commit }, { public_token, metadata }) { ... }