使用 Vuex 和 Onboard.js 的最大调用堆栈大小超出错误

Posted 2023-02-16

【中文标题】使用 Vuex 和 Onboard.js 的最大调用堆栈大小超出错误

【英文标题】：Maximum call stack size exceeded error using Vuex and Onboard.js

【发布时间】：2021-12-24 10:28:15

【问题描述】：

我正在尝试使用 Vuex 和 Onboard.js 在我的 DApp 中存储 web3 提供程序，但是当我尝试在我的状态下提交所选钱包时，我不断收到 Maximum call stack size exceeded，这是我的文件的样子：

store/ethers.js

import  ethers  from 'ethers';
import Onboard from 'bnc-onboard';

export const state = () => (
  address: '',
  onboard: null,
  wallet: null,
);

export const actions = 
  async initOnboard( commit, state ) 
    const onboard = Onboard(
      networkId: 4,
      walletSelect: 
        wallets: [
           walletName: 'metamask' ,
        ],
      ,
      subscriptions: 
        wallet: (wallet) => 
          // If I comment out this line it works...
          commit('SET_WALLET', wallet);

          localStorage.setItem('wallet', wallet.name);
        ,
        address: (address) => 
          commit('SET_ADDRESS', address);
        ,
      ,
    );

    if (localStorage.getItem('wallet')) 
      await onboard.walletSelect(localStorage.getItem('wallet'));
    

    commit('SET_ONBOARD', onboard);
  ,
;

export const mutations = 
  SET_WALLET(state, wallet) 
    state.wallet = wallet;
  ,
  SET_ONBOARD(state, onboard) 
    state.onboard = onboard;
  ,
  SET_ADDRESS(state, address) 
    state.address = address;
  ,
;

index.vue

<template>
  <button @click="connect">
    Connect
  </button>
</template>

<script>
import  mapActions  from 'vuex';

export default 
  mounted() 
    this.$store.dispatch('ethers/initOnboard');
  ,
  methods: 
    ...mapActions('ethers', ['connect']),
  ,
;
</script>

我认为 ethers 库没有问题，因为我将它换成 web3 并遇到了同样的问题。如果我注释掉 commit('SET_WALLET', wallet); 行，错误就会消失，但我需要一种在我的应用程序中访问它的方法。

我认为我在商店中使用 commits 做错了，它导致了一些递归，但我无法弄清楚它是什么。

这是一个重现问题的链接，您需要安装 metamask。如果您单击“连接”按钮并选择“元掩码”，您将在控制台中看到错误。

预览：https://f6875.sse.codesandbox.io/

编辑： https://codesandbox.io/s/upbeat-ardinghelli-f6875?file=/pages/index.vue

【参考方案1】：

这个答案为我指明了正确的方向： maximum calstack size exceeded on vuex commit

所以在调用commit 时冻结对象解决了这个问题：

commit('SET_WALLET', Object.freeze(wallet));

但我不确定为什么会这样。