web3 在React dapp中全局管理web3当前登录用户/智能合约等信息

news/2025/2/22 21:47:27/

上文 Web3 React项目Dapp获取智能合约对象我们在自己的前端dapp项目中链接获取到了 自己的智能合约
我们继续
我们还是先启动ganache环境 终端输入

ganache -d

在这里插入图片描述
然后发布一下我们的智能合约 打开我们的合约项目 终端输入

truffle migrate --reset

这样 我们的智能合约就部署到区块链上了
在这里插入图片描述
然后 我们启动项目 打开浏览器控制台 一切正常 OK
在这里插入图片描述
然后 这里 我们对函数做一点变动
在这里插入图片描述
我们将所有 从 获取web3当前授权用户 到 获取两个区块链中合约的代码都写到initialization中 然后 将整个web3信息对象返回回来

然后 我们要整理它 让所有组件都能够随时拿到这个信息来使用
那么 这个时候 大家能想到的也肯定是 redux 了
但是 redux对非序列化的数据存储 不是那么完善
我们这种非序列化的结构数据 是无法通过redux中间件的序列化检查的 当然可以关闭中间件 让它运行起来 但也可能引发一些小问题

其实 我们这里 完全可以用一种最简单的方式 那就是直接挂window对象上面

window.WebData = WebData;

在这里插入图片描述
这样 我们项目后面要用web3 的信息 去window对象上拿就ok了
啊 有点虎头蛇尾 不过这确实是最直接的方式


http://www.ppmy.cn/news/1190491.html

相关文章

linux下的程序环境和预处理(gcc演示)

1. 程序的翻译环境和执行环境 在ANSI C的任何一种实现中,存在两个不同的环境。 第1种是翻译环境,在这个环境中源代码被转换为可执行的机器指令。 第2种是执行环境,它用于实际执行代码。 2. 详解编译链接 2.1 翻译环境 组成一个程序的…

vue-安装Vue开发者工具

极简插件:下载->开发者模式->拖曳安装->插件详情允许访问文件 网址:https://chrome.zzzmh.cn/index 搜索Vue Devtools 下载下来的安装包先解压 然后点击chrome浏览器的右上角三个点的按钮在里面找到扩展程序这个选项,然后点进去管理…

使用Nokogiri和OpenURI库进行HTTP爬虫

目录 一、Nokogiri库 二、OpenURI库 三、结合Nokogiri和OpenURI进行爬虫编程 四、高级爬虫编程 1、并发爬取 2、错误处理和异常处理 3、深度爬取 总结 在当今的数字化时代,网络爬虫已经成为收集和处理大量信息的重要工具。其中,Nokogiri和OpenUR…

影视企业有哪些方式将视频文件快速海外跨国传输国内?

影视行业是一个高度国际化的行业,影视企业在跨国合作、制作、发行等方面有着强烈的需求。然而,影视企业在跨国文件传输方面也面临着诸多的问题和难题。视频文件通常具有较大的文件大小、多样的文件格式、高要求的文件质量等特点,这些特点使得…

基于深度学习的人脸性别年龄识别 - 图像识别 opencv 计算机竞赛

文章目录 0 前言1 课题描述2 实现效果3 算法实现原理3.1 数据集3.2 深度学习识别算法3.3 特征提取主干网络3.4 总体实现流程 4 具体实现4.1 预训练数据格式4.2 部分实现代码 5 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 毕业设计…

记录 vue + vuetify + electron 安装过程

NodeJs 版本: 20 内容来自: Electron Vue.js Vuetify 构建跨平台应用_思月行云的博客-CSDN博客文章浏览阅读61次。Go coding!https://blog.csdn.net/kenkao/article/details/132600542 npm config set registry https://registry.npm.taobao.org np…

AI智能识别如何助力PDF,轻松实现文档处理?

AI智能识别如何助力PDF,轻松实现文档处理? 随着科技的不断发展,人工智能(AI)在各个领域都发挥着重要的作用。其中,文档智能( Document AI )在金融、医疗、教育、保险、能源、物流等…

基于springboot实现学生就业管理系统项目【项目源码+论文说明】

基于springboot实现学生就业管理系统演示 摘要 随着信息化时代的到来,管理系统都趋向于智能化、系统化,学生就业管理系统也不例外,但目前国内仍都使用人工管理,市场规模越来越大,同时信息量也越来越庞大,人…