State Management with Vuex Chapter 21Using 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 devCreating 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: 0,
},
});