Vuex と Onboard.js を使用して web3 プロバイダーを DApp に保存しようとしていますが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
私は私の店で何か間違ったことをしていると思います.
問題を再現したリンクを次に示します。メタマスクをインストールする必要があります。「接続」ボタンをクリックして「メタマスク」を選択すると、コンソールにエラーが表示されます。
プレビュー: https://f6875.sse.codesandbox.io/
エディター: https://codesandbox.io/s/upbeat-ardinghelli-f6875?file=/pages/index.vue