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

Getting ready

Mutations are the building blocks of actions, so it's highly suggested you complete the
preceding recipe before trying this.

We will be using the setup from the Building a simple storage for the application state recipe;
you can use your own as well, but in any case, this recipe is based on a slight modification

of the official Webpack template.

How to do it...

You will build a clone of the popular Xkcd website. Actually, it will be a wrapper more

than a real clone, since we will reuse the panels from the website.

Create a Vue project based on the Webpack template with vue init webpack. The first

thing we will do is wire up the API to the Xkcd website in the index.js inside the config

folder. Put the following lines inside the proxyTable object:

module.exports = {

...

dev: {

proxyTable: {

'/comic': {

target: 'https://xkcd.com',

changeOrigin: true,

pathRewrite: (path, req) => {

const num = path.split('/')[2]

return `/${num}/info.0.json`

}

}

},

...

This will redirect all the requests we make to /comic to the Xkcd website.

Inside src, make a new store directory and an index.js inside it; here, start building the

application store:

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

state: {