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

There can't be more than 1 arg in action function. Destructure a payload if you need several values — Estus Flask
– Estus Flask, Commented Jan 21, 2024 at 9:39
@EstusFlask Do you mean I should put them together in an object? Sorry not great with Vue mostly a backend guy and got that code from an npm package. Should I write my own component for it instead? — joshk132
– joshk132, Commented Jan 21, 2024 at 16:06
See the docs, action function is not variadic, the second param is payload object, vuex.vuejs.org/guide/actions.html#dispatching-actions , everything you pass to an action needs to be its properties — Estus Flask
– Estus Flask, Commented Jan 21, 2024 at 16:22
@EstusFlask Thanks, I guess I am a little confused still. Would that just mean I add the object next to the dipatching of the action? Where would the state come from? It very much seems like a black box of where that data is coming from/passed in. Almost as if I need a helper to call the proper action and instead bind my component to a different action directly in my view — joshk132
– joshk132, Commented Jan 21, 2024 at 18:49
Should be onSuccess({ commit }, { public_token, metadata }) { and self.onSuccess({ public_token, metadata }) to use payload object. This is totally about function signature — Estus Flask
– Estus Flask, Commented Jan 21, 2024 at 20:24

Estus Flask · Accepted Answer · 2024-01-23 01:19:44Z

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 }) { ... }

answered Jan 23, 2024 at 1:19

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related