在vue中引入web3
1.当MetaMask还有web3这里我们直接在浏览器的调试里面输入web3就可以看到。
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()
这个方法,后面跟个回调函数。下面就是我写的当账户和网络变化的时候都需要重新连接,但是这个重新连接是在特定页面上的,就是是授权页面上需要重新连接,要是其他二点页面就不用了。
更多推荐
所有评论(0)