Preamble

To continue the Dapp build series, this article will guide you to build sample Dapp with the vuejs framework. Basically, we will build an application based on smart cotnract that was built in the first article: Building smart contract.

We will basically use the existing smart contract and build an application to transfer tokens as we did with React. For Vuejs, there are a few things that need to be changed, but the ideas are basically the same

Prepare

Just like init react , just run the command

• Note: the vue version you use is vue 3, so if you are using the older versions (1.x or 2.x), you can uninstall it with the commands npm uninstall vue-cli -g or yarn global remove vue-cli .

In case you do not have vue , you can install it via the following command:

Once completed, the directory structure will look like this:

Continuing, we will add the migrated contracts to the vue-fronted src folder – this step is similar to the react side

Application deployment

For those of you who are just using react , vue components are designed to be quite different when it contains both js , html and css – for me, I find this design quite convenient and more compact than react.

In the framework of the article only shows how to interact with smart contracts, so I will not talk about the file structure as well as the division of components or views , with the demo, I will code directly on the App.vue component.

Other than having to add enough combo action , reducer , store or add a middleware (I use thunk) as react, with just one store vue is enough.

Note: The biggest difference that you need to keep in mind when deciding whether to use react or vue to build is that it comes with the corresponding State manager, redux and vuex . The biggest difference here is that redux is immuatble and vuex is mutable. The states in react will be immutable, states that cannot be modified but can only be completely changed (as in the previous lesson, we can see that the reducers use syntax … the purpose state to reuse the old state . Combine with new variables to create new state ). For vuex , their idea is that we can change the state directly. It is difficult to talk about which is better, depending on each person’s purpose

Add 2 vuex and web3 packages to package.json :

Store

Add a store / index.js file that looks like this:

At a glance, it also looks similar to the 3 action combo, reducer and store like react except they are designed in the same file.

Regarding usage, you can read directly on the homepage of vuex or you can read through the overview of myself:

• state : Similar to react, these are the states that will be used and used by the app, shared between views and components
• mutation : This is the only thing that can change states and the only thing it cares about is also state
• actions : It can be considered as business logic that performs application actions, an action can call many mutations
• getter : Getter is basically added to make it easier to return states, you can add functions (eg, data filters) here to return the necessary state instead of the raw state.

Finally update to let App know that we are using vuex to manage state , edit main.js file :

State

The initial state init will be similar to the react side:

Actions

First, we also add the action to connect to the metamask in the utils / getWeb3.js folder:

Next will be similar to react as the web3Connect , initContract , sendCoin , getBalance actions :

web3Connect:

initContract:

sendCoin:

getBalance:

You will notice that we have quite a few commits that appear, which is the syntax to enable mutations.

Mutations

We will define the mutations that have been used in all of the above actions :

App

The store is basically complete, now it’s time to rewrite the interface and call actions accordingly

Script section: