使用 Web3和Vue.js 来创建你的第一个以太坊 dAPP(二)

英文:Alt Street 来源:开源中国

欢迎回到这个很牛的教程系列的第2部分,在教程中我们亲手构建我们的第一个分布式应用程序。 在第二部分中,我们将介绍VueJS和Vuex的核心概念,并引入web3js以与metamask进行交互。

如果你错过了第一部分,你可以在下面找到它:

正事: VueJS

VueJS是一个用于构建UI的javascript框架。乍一看,它看起来与经典的moustache模板类似,但在底层为了使Vue变得响应式发生了很多事情。

{{ message }}

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

这将是一个非常基础的Vue应用程序的结构。数据对象中的消息属性将渲染到id为'app'的元素的屏幕区域,当我们更改此消息时,它将在屏幕上更新并无需刷新。你可以在这个jsfiddle中查看它(须打开自动运行):https://jsfiddle.net/tn1mfxwr/2/ 。

VueJS的另一个重要特性是组件。组件是小规模的、可重用的和自包含的代码片断。本质上,Web应用程序可以抽象为一颗更小的组件树。当我们开始编写我们的前端应用程序时,这将会变得更加清晰。

将网页抽象成组件的示例。该网页由三部分组成。其中两个组件具有子组件。

状态的联合:Vuex

我们将使用Vuex来管理我们的应用程序的状态。与redux类似,Vuex实现了一个仓库,作为我们app相关数据的“唯一真实数据源”。Vuex允许我们以可预测的方式操作和提供我们的应用程序所使用的数据。

它的工作方式非常简单。组件在渲染时是需要数据的,它会派发一个动作(action)来获取它所需要的数据。获取数据的API调用发生在action的async中。 一旦数据被提取完成,action就会将这些数据提交给mutation。 之后mutation会改变我们仓库中的状态。当该组件所使用的数据在仓库中发生更改时,它将重新渲染。

Vuex的状态管理模式

在继续之前...

在第一部分中,我们使用 vue-cli 生成了 Vue 应用程序,同时还安装了需要的依赖项。 如果你还没有完成这一部分,请点击的顶部的链接。

如果你正确地完成了一切,目录结构应该如下所示:

新生成的 vue 应用

注意: 如果你打算从这里复制粘贴代码,添加/src/ 到 .eslintignore 文件中,避免缩进错误。

你可以在终端输入‘npm start’来启动这个App。这个App会包含默认的vue应用,因此我们可以将它放出来。

注意:我们正在使用vue Router尽管只有一个route,我们不需要它,但是因为它太简单了,我认为将它放到教程里挺好的。

提示:在.vue文件将你的atom语法(例如 bottom right)添加到HTML。

现在来清理一下这个新项目:

在app.vue中删除img-tag,同时删除在style-tags之间的所有东西。

删除components/HelloWorld.vue,新建两个文件分别名为casino-dapp.vue(我们的主模块)和hello-metamask.vue(会包括我们的metamask数据)

在我们的新文件hello-metamask.vue中粘贴以下代码,这些代码现在只是在一个p-tag中显示文字‘Hello’。

Hello

export default {

name: 'hello-metamask'

}

不错,现在都可以工作了。在你的终端使用‘npm start’启动项目,然后访问localhost:8080。我们现在应该可以看到我们的metamask数据。当我们打开控制台的时候,我们应该看到在state管理模式下控制台log输出的信息,就像是在文章的vuex部分描述的一样。

如果你能做到这一点,一切都很好,那么就认真的做下去。目前这块是这个系列最难的部分。在下一部分,我们将学习如何轮询Metamask的更改(如更换账户)和将我们在第一部分写的智能合约连接到我们的应用。

觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180509B1VDFO00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券