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

We'll recycle the Hello.vue component and put the following template inside it:

<template>

<div class="hello">

<h1>XKCD</h1>

<img :src="currentImg">

</div>

</template>

To make the last panel appear on loading you can use the following JavaScript in the

component:

<script>

import { mapState } from 'vuex'

export default {

name: 'hello',

computed: mapState(['currentImg']),

created () {

this.$store.dispatch('goToLastPanel')

}

}

</script>

Also, you can delete most of the App.vue template and leave only the following:

<template>

<div id="app">

<router-view></router-view>

</div>

</template>

How it works...

The proxyTable object will configure the http-proxy-middleware. This is useful every

time we are developing the UI of a bigger web application and we launch our developer

server on localhost, but our API responds to another web server. This is especially

relevant when we want to use CORS and we don't allow other websites to use our API. The

Xkcd API doesn't allow localhost to consume the web service. This is why, even if we try

to use the Xkcd API directly, our browser won't let us. The changeOrigin option will send

the request with Xkcd as host, making CORS unnecessary.

To call an action from a component, we used the dispatch function. It's also possible to

pass the second argument, the first being the name of the action itself. The second argument

is then passed when you define the action as the second parameter.