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

rate: {

STAR: {

LAMP: 2

},

LAMP: {

DIAM: 0.5

}

}

}

})

export default store

We are creating a new Vuex store that will hold our balance. Initially, we have 100 of each

asset; in the store, the exchange rate between stars and lamps and between lamps and

diamonds is also fixed.

Create a new component under the components directory, named Market.vue. It will

have the following template:

<template>

<div class="market">

<h2>{{symbol1}}/{{symbol2}} Stock Exchange</h2>

<div class="buy-sell">

<input v-model.number="amount">{{symbol1}}

<button @click="buy">

Buy for {{rate*amount}} {{symbol2}}

</button>

<button @click="sell">

Sell for {{rate*amount}} {{symbol2}}

</button>

</div>

</div>

</template>

symbol1 and symbol2 represent the two assets traded. In the JavaScript of this component,

where we define the sell and buy methods, we operate directly on the global Vuex store:

<script>

export default {

name: 'market',

data () {

return {

amount: 0

}

},

computed: {

rate () {