Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Large Application Patterns with Vuex Chapter 18

To display some navigation links to a different market and our current balance, we can edit

the App.vue component with the following template:

<template>

<div id="app">

<nav>

<ul>

<li>

<router-link to="/STAR/LAMP">STAR/LAMP Market</router-link>

</li><li>

<router-link to="/LAMP/DIAM">LAMP/DIAM Market</router-link>

</li>

</ul>

</nav>

<router-view></router-view>

<div class="balance">

Your balance is:

<ul>

<li>{{$store.state.STAR}} stars</li>

<li>{{$store.state.LAMP}} lamps</li>

<li>{{$store.state.DIAM}} diamonds</li>

</ul>

</div>

</div>

</template>

We don't need any JavaScript for this component, so you can delete the