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

return this.$store.state.rate[this.symbol1][this.symbol2]

}

},

props: ['symbol1', 'symbol2'],

methods: {

buy () {

this.$store.state[this.symbol1] += this.amount

this.$store.state[this.symbol2] -= this.amount * this.rate

},

sell () {

this.$store.state[this.symbol1] -= this.amount

this.$store.state[this.symbol2] += this.amount * this.rate

}

}

}

</script>

You should never touch the state directly like I've done here. You should

always use mutations. Here, we are skipping the middleman to keep the

recipe minimalistic. There's more on mutations in the next recipe.

You have to use this component in index.js, inside the router folder, in the following

way:

import Vue from 'vue'

import Router from 'vue-router'

import Market from '@/components/Market'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

redirect: '/STAR/LAMP'

},

{

path: '/:symbol1/:symbol2',

component: Market,

props: true

}

]

})

In the preceding code, we are using the Market component for any route that contains a

couple of trade symbols. As a home page, we are using the STAR/LAMP market.