Using Vuex

Now that we've had a detailed look at what makes up an application driven by Vuex, let's make a playground project to take advantage of these features!

Run the following in your Terminal:

# Create a new Vue project
$ vue init webpack-simple vuex-counter

# Navigate to directory
$ cd vuex-counter

# Install dependencies
$ npm install

# Install Vuex
$ npm install vuex

# Run application
$ npm run dev

Creating a new store

Let's start off by creating a file named index.js inside src/store. This is the file we'll use to create our new store and bring together the various components.

We can start by importing both Vue and Vuex as well as telling Vue that we'd like to use the Vuex plugin:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

We can then export a new Vuex.Store with a state object that contains all of our application states. We're exporting this so that we can import the state in other components when necessary:

export default new Vuex.Store({
  state: {
    count...