• 原文地址：Create your first Ethereum dAPP with Web3 and Vue.JS (Part 2)
• 原文作者：Alt Street
• 譯文出自：掘金翻譯計劃
• 本文永久鏈接：github.com/xitu/gold-m…
• 譯者：L9m
• 校對者：allen, 玉兒

• 使用 Web3 和 Vue.js 來創建你的第一個以太坊 dAPP（第一部分）
• 使用 Web3 和 Vue.js 來創建你的第一個以太坊 dAPP（第二部分）
• 使用 Web3 和 Vue.js 來創建你的第一個以太坊 dAPP（第三部分）

點此在 LinkedIn 分享本文 ?

歡迎回到這個很棒的系列教程的第二部分，在個教程中我們要親身實踐，創建我們的第一個去中心化應用（decentralized application）。在第二部分中，我們將介紹 VueJS 和 VueX 的核心概念以及 web3js 與 metamask 的交互。

如果你錯過了第一部分，你可以在下面找到，也請在 Twitter 上關注我們。

進入正題：VueJS

VueJS 是一個用于構建用戶界面的 JavaScript 框架。初看起來，它類似傳統的 mustache（譯者注：原文為 moustache）模板，但其實 Vue 在后面做了很多工作。

<div id=”app”>{{ message }} </div>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'} }) 復制代碼

這是一個很基本的 Vue 應用的結構。數據對象中的 message 屬性會被渲染到屏幕上 id 為「app」的元素中，當我們改變 message 時，屏幕上的值也會實時更新。你可以去這個 jsfiddle 上查看（開啟自動運行）：jsfiddle.net/tn1mfxwr/2/。

VueJS 的另一個重要特征是組件。組件是小的、可復用的并且可嵌套的小段代碼。本質上，一個 Web 應用是由較小組件組成的組件樹構成的。當我們著手編寫我們前端應用時，我們會愈加清楚。

這個頁面示例是由組件構成的。頁面由三個組件組成的，其中的兩個有子組件。

狀態的整合: Vuex

我們使用 Vuex 管理應用的狀態。類似于 Redux，Vuex 實現了一個對于我們應用數據「單一數據源」的容器。Vuex 允許我們使用一種可預見的方法操作和提供應用程序使用的數據。

它工作的方式是非常直觀的。當組件需要數據進行渲染時，它會觸發（dispatch）一個 action 獲取所需的數據。Action 中獲取數據的 API 調用是異步的。一旦取得數據，action 會將數據提交（commit）給一個變化（mutation）。然后，Mutation 會使得我們容器（store）的狀態發生改變（alert the state）。當組件使用的容器中的數據改變時，它會重新進行渲染。

Vuex 的狀態管理模式。

在我們繼續之前...

在第一部分中，我們已經通過 vue-cli 生成了一個 Vue 應用，我們也安裝了所需的依賴。如果你沒有這樣做的話，請查看上面第一部分的鏈接。

如果你正確完成了各項的話，你的目錄看起來應該是這樣的：

新生成的 vue 應用。

小提示：如果你要從這里復制粘貼代碼段的話，請在你的 .eslintignore 文件中添加 /src/，以免出現縮進錯誤。

你可以在終端中輸入 npm start 運行這個應用。首先我們需要清理它包含的這個默認的 Vue 應用。 注解：盡管只有一個路由，但是我們還是會使用 Vue Router，雖然我們并不需要，但是因為這個教程相當簡單，我想將其保留會更好。 貼士：在你的 Atom 編輯器右下角中將 .vue 文件設置為 HTML 語法（高亮）

現在處理這個剛生成的應用：

• 在 app.vue 中刪除 img 標簽和 style 標簽中的內容。
• 刪除 components/HelloWorld.vue，創建兩個名為 casino-dapp.vue（我們的主組件）和 hello-metamask.vue（將包含我們的 Metamask 數據）的兩個新文件。
• 在我們的新 hello-metamask.vue 文件中粘貼下面的代碼，它現在只顯示了在一個 p 標簽內的「hello」文本。

<template><p>Hello</p> </template><script> export default {name: 'hello-metamask' } </script><style scoped></style> 復制代碼

• 現在我們首先導入 hello-metamask 組件文件，通過導入文件將其加載到主組件 casino-app 中，然后在我們的 vue 實例中，引用它作為模板中一個標簽。在 casino-dapp.vue 中粘貼這些代碼：

<template><hello-metamask/> </template><script> import HelloMetamask from '@/components/hello-metamask' export default {name: 'casino-dapp',components: {'hello-metamask': HelloMetamask} } </script><style scoped></style> 復制代碼

• 現在如果你打開 router/index.js 你會看到 root 下只有一個路由，它現在仍指向我們已刪除的 HelloWorld.vue 組件。我們需要將其指向我們主組件 casino-app.vue。

import Vue from 'vue' import Router from 'vue-router' import CasinoDapp from '@/components/casino-dapp'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'casino-dapp',component: CasinoDapp}] }) 復制代碼

關于 Vue Router：你可以增加額外的路徑并為其綁定組件，當你訪問定義的路徑時，在 App.vue 文件中的 router-view 標簽中，對應的組件會被渲染，并進行顯示。

• 在 src 中創建一個名為 util 的新文件夾，在這個文件夾中創建另一個名為 constants 的新文件夾，并創建一個名為 networks.js 的文件，粘貼下面的代碼。我們用 ID 來代替以太坊（Ethereum）網絡名稱顯示，這樣做會保持我們代碼的整潔。

export const NETWORKS = {'1': 'Main Net','2': 'Deprecated Morden test network','3': 'Ropsten test network','4': 'Rinkeby test network','42': 'Kovan test network','4447': 'Truffle Develop Network','5777': 'Ganache Blockchain' } 復制代碼

• 最后的但同樣重要的（實際上現在用不到）是，在 src 中創建一個名為 store 的新文件夾。我們將在下一節繼續討論。

如果你在終端中執行 npm start，并在瀏覽器中訪問 localhost:8000，你應該可以看到「Hello」出現在屏幕上。如果是這樣的話，就表示你準備好進入下一步了。

設置我們的 Vuex 容器

在這一節中，我們要設置我們的容器（store）。首先從在 store 目錄（上一節的最后一部分）下創建兩個文件開始：index.js 和 state.js；我們先從 state.js 開始，它是我們所檢索的數據一個空白表示（Blank representation）。

let state = {web3: {isInjected: false,web3Instance: null,networkId: null,coinbase: null,balance: null,error: null},contractInstance: null } export default state 復制代碼

好了，現在我們要對 index.js 進行設置。我們會導入 Vuex 庫并且告訴 VueJS 使用它。我們也會把 state 導入到我們的 store 文件中。

import Vue from 'vue' import Vuex from 'vuex' import state from './state'Vue.use(Vuex)export const store = new Vuex.Store({strict: true,state,mutations: {},actions: {} }) 復制代碼

最后一步是編輯 main.js ，以包含我們的 store 文件：

import Vue from 'vue' import App from './App' import router from './router' import { store } from './store/'Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({el: '#app',router,store,components: { App },template: '<App/>' }) 復制代碼

干得好！因為這里有很多設置，（所以請）給你自己一點鼓勵。現在已經準備好通過 web3 API 獲取我們 Metamask 的數據，并使其在我們的應用發揮作用了。該來點真的了！

入門 Web3 和 Metamask

就像前面提到的，為了讓 Vue 應用能獲取到數據，我們需要觸發（dispatch）一個 action 執行異步的 API 調用。我們會使用 promise 將幾個方法鏈式調用，并將這些代碼提取（封裝）到文件 util/getWeb3.js 中。粘貼以下的代碼，其中包含了一些有助你遵循的注釋。我們會在代碼塊下面對它進行解析：

import Web3 from 'web3'/* * 1. Check for injected web3 (mist/metamask) * 2. If metamask/mist create a new web3 instance and pass on result * 3. Get networkId - Now we can check the user is connected to the right network to use our dApp * 4. Get user account from metamask * 5. Get user balance */let getWeb3 = new Promise(function (resolve, reject) {// Check for injected web3 (mist/metamask)var web3js = window.web3if (typeof web3js !== 'undefined') {var web3 = new Web3(web3js.currentProvider)resolve({injectedWeb3: web3.isConnected(),web3 () {return web3}})} else {// web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:7545')) GANACHE FALLBACKreject(new Error('Unable to connect to Metamask'))} }).then(result => {return new Promise(function (resolve, reject) {// Retrieve network IDresult.web3().version.getNetwork((err, networkId) => {if (err) {// If we can't find a networkId keep result the same and reject the promisereject(new Error('Unable to retrieve network ID'))} else {// Assign the networkId property to our result and resolve promiseresult = Object.assign({}, result, {networkId})resolve(result)}})})}).then(result => {return new Promise(function (resolve, reject) {// Retrieve coinbaseresult.web3().eth.getCoinbase((err, coinbase) => {if (err) {reject(new Error('Unable to retrieve coinbase'))} else {result = Object.assign({}, result, { coinbase })resolve(result)}})})}).then(result => {return new Promise(function (resolve, reject) {// Retrieve balance for coinbaseresult.web3().eth.getBalance(result.coinbase, (err, balance) => {if (err) {reject(new Error('Unable to retrieve balance for address: ' + result.coinbase))} else {result = Object.assign({}, result, { balance })resolve(result)}})})})export default getWeb3 復制代碼

第一步要注意的是我們使用 promise 鏈接了我們的回調方法，如果你不太熟悉 promise 的話，請參考此鏈接。下面我們要檢查用戶是否有 Metamask（或 Mist）運行。Metamask 注入 web3 本身的實例，所以我們要檢查 window.web3（注入的實例）是否有定義。如果是否的話，我們會用 Metamask 作為當前提供者（currentProvider）創建一個 web3 的實例，這樣一來，實例就不依賴于注入對象的版本。我們把新創建的實例傳遞給接下來的 promise，在那里我們做幾個 API 調用：

• web3.version.getNetwork() 將返回我們連接的網絡 ID。
• web3.eth.coinbase() 返回我們節點挖礦的地址，當使用 Metamask 時，它應該會是已選擇的賬戶。
• web3.eth.getBalance(<address>) 返回作為參數傳入的該地址的余額。

還記得我們說過 Vuex 容器中的 action 需要異步地進行 API 調用嗎？我們在這里將其聯系起來，然后再從組件中將其觸發。在 store/index.js 中，我們會導入 getWeb3.js 文件，調用它，然后將其（結果）commit 給一個 mutation，并讓其（狀態）保留在容器中。

在你的 import 聲明中增加：

import getWeb3 from '../util/getWeb3' 復制代碼

然后在（store 內部）的 action 對象中調用 getWeb3 并 commit 其結果。我們會添加一些 console.log 在我們的邏輯中，這樣做是希望讓 dispatch-action-commit-mutation-statechange 流程更加清楚，有助于我們理解整個執行的步驟。

registerWeb3 ({commit}) {console.log('registerWeb3 Action being executed')getWeb3.then(result => {console.log('committing result to registerWeb3Instance mutation')commit('registerWeb3Instance', result)}).catch(e => {console.log('error in action registerWeb3', e)})} 復制代碼

現在我們要創建我們的 mutation，它會將數據存儲為容器中的狀態。通過訪問第二個參數，我們可以訪問我們 commit 到 mutation 中的數據。在 mutations 對象中增加下面的方法：

registerWeb3Instance (state, payload) {console.log('registerWeb3instance Mutation being executed', payload)let result = payloadlet web3Copy = state.web3web3Copy.coinbase = result.coinbaseweb3Copy.networkId = result.networkIdweb3Copy.balance = parseInt(result.balance, 10)web3Copy.isInjected = result.injectedWeb3web3Copy.web3Instance = result.web3state.web3 = web3Copy} 復制代碼

很棒！現在剩下要做的是在我們的組件中觸發（dispatch）一個 action，取得數據并在我們的應用中進行呈現。為了觸發（dispatch）action，我們將會用到 Vue 的生命周期鉤子。在我們的例子中，我們要在它創建之前觸發（dispatch）action。在 components/casino-dapp.vue 中的 name 屬性下增加以下方法：

export default {name: 'casino-dapp',beforeCreate () {console.log('registerWeb3 Action dispatched from casino-dapp.vue')this.$store.dispatch('registerWeb3')},components: {'hello-metamask': HelloMetamask} } 復制代碼

很好！現在我們要渲染 hello-metamask 組件的數據，我們賬戶的所有數據都將在此組件中進行呈現。從容器（store）中獲得數據，我們需要在計算屬性中增加一個 getter 方法。然后，我們就可以在模板中使用大括號來引用數據了。

<template><div class='metamask-info'><p>Metamask: {{ web3.isInjected }}</p><p>Network: {{ web3.networkId }}</p><p>Account: {{ web3.coinbase }}</p><p>Balance: {{ web3.balance }}</p></div> </template><script> export default {name: 'hello-metamask',computed: {web3 () {return this.$store.state.web3}} } </script><style scoped></style> 復制代碼

太棒啦！現在一切都應該完成了。在你的終端（terminal）中通過 npm start 啟動這個項目，并訪問 localhost:8080。現在，我們可以看到 Metamask 的數據。當我們打開控制臺，應該可以看到 console.log 輸出的 —— 在 Vuex 那段中的描述狀態管理模式信息。

說真的，如果你走到了這一步并且一切正常，那么你真的很棒！這是本系列教程目前為止，難度最大的一部分。在下一部分中，我們將學到如何輪詢 Metamask（如：賬戶切換）的變化，并將在第一部分描述智能合約與我們的應用相連接。

以防萬一你出現錯誤，在這個 Github 倉庫 的 hello-metamask 分支上有此部分完整的代碼

不要錯過本系列的最后一部分！

如果你喜歡本教程的話，請讓我們知道，謝謝你堅持讀到最后。

ETH?—?0x6d31cb338b5590adafec46462a1b095ebdc37d50

---

想完成自己的想法嗎？我們提供以太坊（Ethereum）概念驗證和開發眾募。

• Alt Street —— 區塊鏈顧問：區塊鏈概念驗證和代幣銷售等等... altstreet.io

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、后端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

轉載于:https://juejin.im/post/5aba0870f265da23a2292245

總結

以上是生活随笔為你收集整理的[译] 使用 Web3 和 Vue.js 来创建你的第一个以太坊 dAPP（第二部分）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。