Vuex Store 中 Plaid Link 凭证管理：如何解决 Metadata 参数 Undefined 错误

2024-03-08 18:35:08

在 Vuex Store 中有效管理 Plaid Link 凭证

简介

Plaid Link 是一个强大的工具，它可以让你轻松地将你的金融账户连接到你的应用程序。通过将 Plaid Link 凭证存储在 Vuex store 中，你可以创建一个集中式和可预测的数据管理方法。然而，在某些情况下，你可能会遇到从 Vuex store 中检索 metadata 参数时遇到 undefined 错误。本文将探讨导致此问题的原因并提供分步解决方法。

问题根源

metadata 参数在 Vuex store 中返回 undefined 的问题通常源于以下原因：

组件与 store 之间的数据传递不当： 在组件和 store 之间传递数据时，必须使用适当的提交变异来更新 state。
异步操作： onSuccess 动作是一个异步操作，这意味着它会在一段时间后执行。在你完成操作之前尝试访问 metadata，它可能会返回 undefined。

解决方案

要解决此问题，请按照以下步骤操作：

1. 检查提交变异：

确保你在 onSuccess 动作中使用正确的提交变异来更新 state。除了设置 public_token 的 SET_PUBLIC_TOKEN 变异之外，你还需要创建另一个变异来处理 metadata。

2. 使用 Promise：

onSuccess 动作返回一个 Promise，这意味着你可以使用它来处理异步操作。将你的代码修改如下：

onSuccess({ commit }, public_token, metadata) {
  commit('SET_PUBLIC_TOKEN', public_token);
  commit('SET_METADATA', metadata);
  return new Promise((resolve, reject) => {
    // 异步操作
  });
}

3. 在组件中使用 getters：

在组件中，使用 getters 从 store 中获取数据。这确保了你访问的数据是最新的。

computed: {
  ...mapState({
    plaid: state => state.plaid
  })
},

修改为：

computed: {
  plaidMetadata() {
    return this.$store.getters['plaid/metadata']
  }
},

现在，你可以通过 plaidMetadata 计算属性在组件中访问 metadata。

示例代码

Vuex store：

export default new Vuex.Store({
  state: {
    plaid: {
      public_token: null,
      metadata: null,
    },
  },
  mutations: {
    SET_PUBLIC_TOKEN(state, public_token) {
      state.plaid.public_token = public_token;
    },
    SET_METADATA(state, metadata) {
      state.plaid.metadata = metadata;
    },
  },
  actions: {
    onSuccess({ commit }, public_token, metadata) {
      commit('SET_PUBLIC_TOKEN', public_token);
      commit('SET_METADATA', metadata);
      return new Promise((resolve, reject) => {
        // 异步操作
      });
    },
  },
  getters: {
    plaidMetadata: state => state.plaid.metadata,
  },
});

组件：

<template>
  <PlaidLink
    ...
    :onSuccess='onSuccess'
  >
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState({
      plaid: state => state.plaid
    }),
    plaidMetadata() {
      return this.$store.getters['plaid/metadata']
    }
  },

  methods: {
    ...mapActions({
      onSuccess: 'onSuccess',
    }),
  },

  mounted() {
    this.onLoad();
  },
}
</script>