onSucess 在 Vue 视图内但不在组件内时返回元数据参数未定义

Question

我有一个用于 Plaid Link 的 vue 组件，它调用我的 Vuex 存储中名为

onSuccess

的函数/操作，该组件应该调用我的后端 API 以将公共令牌交换为访问令牌，并将有关链接的一些数据发送到后端。然而，当我的 Vuex 存储中的

metadata

时，

undefined

参数似乎会以

console.log()

的形式返回，但如果我在组件本身内部执行此操作，则没有任何问题。

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

Answer 1

Vuex 操作和突变可以有 1 个可选的有效负载参数，请参阅用法。如果需要传递多个值，它们需要是有效负载对象的属性。

为了简洁，使用对象字面速记语法：

self.onSuccess({ public_token, metadata })

和对象解构语法：

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