Vuex Quick Start Guide

Andrea Koutifaris

• Publisher: Packt Publishing
• Year: 2018
• eBook ISBN: 9781788991544
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Development
• Index: Computer Science

Develop consistent web apps with Vuex by easily centralizing the state of your applicationAbout This Book• Uncover the hidden features of Vuex to build applications that are powerful, consistent, and maintainable• Enforce a Flux-like application architecture in your Vue application• Test your Vuex elements and Vue components using Karma/Jasmine testing frameworkWho This Book Is ForIf you are a JavaScript developer, working on Vue.js and want to extend your web development skills to develop and maintain bigger applications using state management, then this book is for you. No knowledge of Vuex is required.What You Will Learn• Moving from classical MVC to a Flux-like architecture• Implementing predictable centralized state management in your applications using Vuex• Using ECMAScript 6 features for developing a real application• Using webpack in conjunction with Vue single file components• Testing your Vue/Vuex applications using Karma/Jasmine and inject-loader• Simple and effective Test Driven Development• Extending your application with Vuex pluginsIn DetailState management preserves the state of controls in a user interface. Vuex is a state management tool for Vue.js that makes the architecture easier to understand, maintain and evolve. This book is the easiest way to get started with Vuex to improve your Vue.js application architecture and overall user experience.Our book begins by explaining the problem that Vuex solves, and how it helps your applications. You will learn about the Vuex core concepts, including the Vuex store, changing application state, carrying out asynchronous operations and persisting state changes, all with an eye to scalability.You will learn how to test Vuex elements and Vue components with the Karma and Jasmine testing frameworks. You will see this in the context of a testing first approach, following the fundamentals of Test Driven Development. TDD will help you to identify which components need testing and how to test them. You will build a full Vuex application by creating the application components and services, and persist the state.Vuex comes with a plugin system that allows programmers to extend Vuex features. You will learn about some of the most powerful plugins, and make use of the built-in logger plugin. You write a custom Google Analytics plugin to send actions to its analytics API, and an Undo/Redo plugin.Style and approachLearn the core concepts and get started using Vuex as a centralized state management system in your Vue.js applications.

Coding the EveryNote App Using Vuex State Management

In this chapter, we will develop an application to take notes, called EveryNote, from scratch. In the first part of the chapter we will analyze and design the application, as well as preparing the folder structure for the project.

After that, we will build the application incrementally through tests and code. This application will be developed while writing this chapter, providing a real-world Vuex development example.

The application can be downloaded by cloning the https://github.com/PacktPublishing/-Vuex-Condensed Git repository. Each section of this chapter has a corresponding Git tag that can be used to download the code that has been written for that section.

While reading this chapter, you will learn how to do the following:

• Design and develop an application exploiting Vuex features
• Use Vuex inside Vue components
• Test Vue/Vuex components effectively
• Use actions to handle asynchronous operations

Technical requirements

You will be required to have Node.js installed on a system. Finally, to use the Git repository of this book, the user needs to install Git.

The code files of this chapter can be found on GitHub:
https://github.com/PacktPublishing/Vuex-Quick-Start-Guide/tree/master/chapter-4

Check out the following video to see the code in action:
https://goo.gl/QaPP1Q

Designing the EveryNote web app

One way to start designing an application is by creating mock-ups of the user interfaces. This way, you can present your mock-ups to your stakeholders, discuss them, update your mock-ups accordingly, and resubmit them to stakeholders. This can be done before you start developing.

The EveryNote app will look like the following mock-up:

Figure 3.2: EveryNote mock-up interface

The application will have the following features:

• Create new notes
• Show all notes
• Update an existing note
• Delete a note
• Save notes to LocalStorage

After basic features are implemented, we will also add two more features:

• Search among notes
• Pin a note

In a real-world application, you may need user stories to better define what the behaviors expected are and, thus, what programmers should code. These stories can be tested, and this type of test is called an acceptance test.

In this case, the EveryNote features are simple and well defined, so we can begin by picking a feature and starting to develop it.

Application structure

Vuex proposes an application-generic structure, which we will adopt. The following is the folder structure:

test # test folder
├── test_file.spec.js # a test file
└── ...
src # app main folder
├── index.html
├── main.js
├── api
│ └── ... # abstractions for making API requests
├── components
│ ├── App.vue
│ └── ...
└── store
 ├──index.js #here we assemble modules and export the store
 ├── actions.js # root actions
 ├── mutations.js # root mutations
 └── modules
 ├── module_a.js # a module
 └── module_b.js # another module

We are now going to create the project scaffold by adding some files to the notes-app folder we created at the beginning of this chapter.

The first file to be created is index.html. As for any Vue.js application, we need to put the root container for the Vue/Vuex application inside the body as follows:

<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Packt: Vuex condensed EveryNote</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

The second file is main.js. It contains the code to startup the Vue.js part of the application:

// src/main.js
import Vue from 'vue';
import App from './components/App.vue';
import store from './store';

new Vue({
 el: '#...

Table of contents

• Title Page
• Copyright and Credits
• Packt Upsell
• Contributors
• Preface
• Rethinking User Interfaces with Flux, Vue, and Vuex
• Implementing Flux Architecture with Vuex
• Setting Up Development and Test Environment
• Coding the EveryNote App Using Vuex State Management
• Debugging Vuex Applications
• Using the Vuex Plugin System
• Other Books You May Enjoy