在vue中引入web3

最新推荐文章于 2024-05-22 08:00:00 发布

若水上善666

最新推荐文章于 2024-05-22 08:00:00 发布

阅读量8.8k

点赞数 2

分类专栏：区块链

本文链接：https://blog.csdn.net/weixin_43977647/article/details/106061756

版权

区块链专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.当MetaMask还有web3

这里我们直接在浏览器的console控制台里面输入window，web3就可以看到。

相当于MetaMask在当前环境中定义了web3，在当前的环境也就是window环境，在console控制台中this指针指向的window，window.web3是一个类。

原来我们本可以不需要在前端中引入web3就可以直接用，MetaMask帮我们都考虑好了，但是现在不行了，大人时代变了，哈哈，MetaMask不再提供web3这个变量了，需要我们自己引入。

2.在vue中引入web3

安装web3包
npm install web3 --save

（一）在main.js引入

import Web3 from 'web3'
Vue.prototype.Web3 = Web3
这样我们就可以在任何地方通过this.Web3来引用了

（二）实例化web3，初始化MetaMask

      const _this = this
      this.GLOBAL.web3 = window.web3 = new this.Web3(window.ethereum)
     
      window.ethereum.autoRefreshOnNetworkChange = false
      window.ethereum.on('accountsChanged', () => {
        // console.log('accountsChanged')
        switch (_this.$route.path) {
          case '/':
            this.connectMetaMask()
            break
          default:
        }
      })
      window.ethereum.on('networkChanged', () => {
        // console.log('networkChanged')
        switch (_this.$route.path) {
          case '/':
            this.connectMetaMask()
            break
          default:
        }
      })

MetaMask虽然没有提供web3，但是window.ethereum还是有滴，要不然我们实例化只能在私有链上实例化了，第一行代码就是实例化web3，然后把这个实例赋值给window.web3，就和原来的MeatMask一样一样的了，我还把它在全局变量中保存了一下，不知道为什么就是想保存，谁叫是我写的代码呢。

下面代码就是当账号和网络发生变化时候应该怎么操作，原来MetaMask在网络变化的时候都会自动刷新，现在它会报个warning，说不行不行，自己的事情自己做，鬼知道你想不想让我刷新呢，然后告诉你要用window.ethereum.on()这个方法，后面跟个回调函数。下面就是我写的当账户和网络变化的时候都需要重新连接，但是这个重新连接是在特定页面上的，就是是授权页面上需要重新连接，要是其他二点页面就不用了。