Vuex中onSuccess的metadata参数返回undefined，组件内正常

我有一个集成Plaid Link的Vue组件，组件会调用Vuex Store中的onSuccess Action，该Action负责调用后端API将public_token兑换为access_token，并发送链接相关数据。但发现Vuex Store中用console.log()打印时，metadata参数返回undefined，组件内部打印该参数却完全正常。

Vuex 代码 #

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

视图脚本代码 #

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

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

视图模板代码 #

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

组件内plaid.create代码（已移除其他辅助函数） #

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

原因分析 #

Vuex的Action函数签名规则是：第一个参数是context上下文对象，第二个参数是唯一的payload载荷参数。如果直接传递多个独立参数（如public_token和metadata），Vuex只会将第二个参数作为payload，第三个参数会被忽略，导致metadata在Action中变为undefined。

解决方案 #

1. 修改组件内的调用方式，将多个参数打包成一个对象传递：

onSuccess: function(public_token, metadata) {
              console.log(metadata)
              // 把参数封装为对象
              self.onSuccess({ public_token, metadata })
            },

2. 修改Vuex中的Action，从payload对象中解构所需参数：

onSuccess({ commit }, { public_token, metadata }) {
        console.log(public_token, metadata) // 现在能正常获取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);
            });
        })
    },

内容的提问来源于stack exchange，提问作者joshk132