Large Application Patterns with Vuex Chapter 18How to do it...
Create a new project based on the Webpack template with the following command run in a
new directory:
vue init webpackHow you answer the question is not relevant. Run npm intall and install Vuex with npm
install vuex --save or yarn add vuex if you use yarn.
Open the main.js file inside the src folder and add the following highlighted lines to
finish installing Vuex:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})Of course, there is no store module right now, so you need to create one. To do this, create
a folder just under the src folder and call it store. Inside it, create a file named index.js.
In the main.js file, we didn't specify to use the index.js file, but that's the default
behavior when no file is specified but only the folder.
What we will implement is a simplified stock market. We have three assets: stars (STAR),
lamps (LAMP), and diamonds (DIAM). We will define two routes: one for the STAR/LAMP
market and another for the LAMP/DIAM market.
Inside the index.js file in the store folder, write the following:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
STAR: 100,
LAMP: 100,
DIAM: 100,