自学Vue开发Dapp去中心化钱包（三）
前言
本篇主要记录学习Vue并实际参与完结web3门户项目的经验和走过的弯路。拖了这么久才来还债，说项目忙那是借口，还是因为个人懒！从自学到实战Vue实际中间就1周的学习熟悉时间，学习不够深就会造成基础不稳，多次推翻重来的情况，从架子搭设到实际页面功能都存在这种情况，说来真是惭愧。最终，算是圆满完工吧。
一、项目框架
1.打包方式
vue新建项目打包方式分2种（其他的方式暂未学习）：
1.使用webpack工具
学习时参照了bilibili教学老师的打包方式，也就是上篇文章（自学Vue开发Dapp去中心化钱包（二））介绍的，之后按照这个新建项目开始开发web3门户。
命令如下：
vue init webpack 项目名称项目结构如下：
2.使用vue-cli工具
命令如下：
vue create 项目名称项目结构如下：
总结：就学习而言，webpack打包方式新手比较适合，多数参数都能接触到，然对项目而言，再经过学习和调查后发现多数快速搭建大家用的是vue-cli工具。最终web3门户这个项目我使用了vue-cli这种打包方式的项目，结构很明朗。
2.vuex组件
store的结构上篇文章（自学Vue开发Dapp去中心化钱包（二））也介绍过，这里对文章中store的模块化重新做了优化，使其更符合“模块化”这个概念。
结构如下：
这里myStore，user，settings相当于3个不同的模块，存储3组不同的信息分别对应web3相关参数、用户相关参数、系统配置项相关参数。
注：Vuex持久化插件vuex-persistedstate这里主要是为了解决刷新后数据消失的问题，持久化缓存一些全局变量。使用时注意createPersistedState里面应该是模块的参数，比如myStore.account，是myStore模块下的参数account。
myStroe.js
import * as ethers from "ethers";
import {getWethAddress} from "@/config/contracts";
import {getEth_chainId} from "@/methods/common";const state = {//provider对象provider: {},//合约对象contracts: {},//签名对象signer: {},//小狐狸钱包的账户addressaccount: '',//以太坊网络ID：0x5net: '',//gas费，后续可能要用gasPrice: 0,//钱包余额balance: '0.0',//作为是否链接登录到小狐狸钱包的标志isConnectWallet: false,//绑卡列表数据，用于下拉框accountList: [],//交易计数，用于发生交易时同步刷新交易记录列表tradeCounter: 0,
}
const mutations = {saveProviderStore: (state, provider) => {state.provider = provider;},saveContractsStore: (state, contracts) => {state.contracts = contracts;},saveAccountStore: (state, account) => {state.account = account;},saveBalanceStore: (state, balance) => {state.balance = balance;},saveNetStore: (state, net) => {state.net = net;},saveGasPriceStore: (state, gasPrice) => {state.gasPrice = gasPrice;},saveIsConnectWallet: (state, isConnectWallet) => {state.isConnectWallet = isConnectWallet;},saveSigner: (state, signer) => {state.signer = signer;},saveAccountList: (state, accountList) => {state.accountList = accountList;},saveTradeCounter: (state, tradeCounter) => {state.tradeCounter = tradeCounter;},}const actions = {// 触发保存方法SET_PROVIDER: ({ commit }, payload) => {commit('saveProviderStore', payload);},SET_CONTRACTS: ({ commit }, payload) => {commit('saveContractsStore', payload);},SET_ACCOUNT: ({ commit }, payload) => {commit('saveAccountStore', payload);},SET_BALANCE: ({ commit }, payload) => {commit('saveBalanceStore', payload);},SET_NET: ({ commit }, payload) => {commit('saveNetStore', payload);},SET_GAS_PRICE: ({ commit }, payload) => {commit('saveGasPriceStore', payload);},SET_IS_CONNECT_WALLET: ({ commit }, payload) => {commit('saveIsConnectWallet', payload);},SET_SIGNER: ({ commit }, payload) => {commit('saveSigner', payload);},SET_ACCOUNT_LIST: ({ commit }, payload) => {commit('saveAccountList', payload);},SET_TRADE_COUNTER: ({ commit }, payload) => {commit('saveTradeCounter', payload);},async connectWallet({ dispatch }) {let web3Provider;if (window.ethereum) {web3Provider = window.ethereum;try {//通过const addressArray = await web3Provider.request({method: "eth_requestAccounts",});let address = addressArray[0];const obj = {status: "
自学Vue开发Dapp去中心化钱包（三）相关推荐
- 自学Vue开发Dapp去中心化钱包（一）
文章目录 目录 文章目录 前言 一.需求背景 二.名词学习 1.web3 2.去中心化钱包 3.中心化钱包 4.区块链 5.ethers.js 6.Vue 7.以太坊 8.小狐狸钱包 三.技术选型 1 ...
- 自学Vue开发Dapp去中心化钱包（二）
目录 前言 一.Vue基础学习 二.开始使用 1.安装Node.js 2.安装淘宝npm 3.安装vue-cli 4.创建一个Vue项目 6.idea打开项目 7.安装依赖 ...
- 【技术工坊39期】去中心化钱包和中心化钱包的开发框架和实现
1,活动基本信息 1)题目: [技术工坊39期]去中心化钱包和中心化钱包的开发框架和实现 2)议题: 经历了2017年和2018年 的大起大落,跌宕起伏.以***为代表的加密货币走入了大众的视野.而作 ...
- CoinU基本概念分享（什么是去中心化钱包、助记词丢失怎么办等）
1.CoinU钱包如何"去中心化"? · CoinU钱包是一款去中心化的HD钱包,你的钱包助记词完全由你自己保管.你的所有资产都被存放在区块链网络中.CoinU钱包将不会对你的资产 ...
- C语言宠物领养系统,开发一个去中心化应用Dapp-宠物领养
1. 参考资料 http://truffleframework.com/tutorials/pet-shop 这是一个使用以太坊开发的完整的去中心化应用(Dapp),出自tuffle suite. P ...
- 应用开发也去中心化？基于BCH的筹款平台Akari-Pages与Lighthouse正面交锋
比特币现金(BCH)并不仅仅满足于成为一种支付手段,未来智能合约的上线也在助推其生态体系的打造.当然,这离不开众多支持者的努力. 两个月前,为助力BCH应用开发标准建立,推动BCH标准化.规模化开发, ...
- python去中心化_EOS区块链dApp去中心化应用汇总
EOS最近一直在区块链新闻中.它的主干网(公有链)发布了,人们仍然对它们持怀疑态度.在101Blockchain.com网站上,我们知道会有紧张的投资者.怀疑的分析家和像你一样好奇的读者.这就是为什么 ...
- EOS区块链DApp去中心化应用汇总
EOS最近一直在区块链新闻中.它的主干网(公有链)发布了,人们仍然对它们持怀疑态度.在101Blockchain.com网站上,我们知道会有紧张的投资者.怀疑的分析家和像你一样好奇的读者.这就是为什么 ...
- 初试JAVA中心化钱包接入BTC，USDT
给大家分享一下我实现的方法,肯定有缺点或漏洞,在慢慢完善改进,有大佬发现也可以指正一下~ 首先在服务器上搭BTC,和USDT节点,这里注意,不能放在同一个服务器上跑这两个链,因为usdt是在btc协议 ...
最新文章
- 学术交流丨魏子卿院士：北斗坐标系
- H264码流的两种形式：Annex B和AVCC
- GitHub：基于epoll机制的高并发聊天室，c语言实现
- 绘制对象iPhone开发基础教程 笔记
- Codeforces Round #368 (Div. 2)
- 云栖大会上，阿里巴巴重磅发布前端知识图谱！
- bind 0.0.0.0的作用是什么呢？
- 【python】抄写大神的百度贴吧代码
- 关于SVG的viewBox
- unity 制作书本 翻页效果
- ffmpeg函数介绍
- 常用正则表达式(不断更新ing...)
- Windows 10 + kali Linux 双系统安装教程（详细版）
- 【机器学习｜数学基础】Mathematics for Machine Learning系列之矩阵理论（21）：常用方阵函数的一些性质
- 国外 PhD 多读几年有哪些利弊？
- Java学习第十二天----方法参数类型以及返回值类型问题、链式编程、package包、权限修饰符、内部类、成员内部类
- ASP.NET 上传图片添加文字、Logo水印
- [转]增强型N沟道mos管（如si2300）开关条件
- 存储误删除所有lun的数据恢复方法
- 蜻蜓优化算法Python代码（详细注释）
热门文章