Vuex Quick Start Guide

Vuex Quick Start Guide

by Andrea Koutifaris
Released April 2018
Publisher(s): Packt Publishing
ISBN: 9781788999939

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Develop consistent web apps with Vuex by easily centralizing the state of your application

About 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 framework
Who This Book Is For

If 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 plugins
In Detail

State 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 approach

Learn the core concepts and get started using Vuex as a centralized state management system in your Vue.js applications.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Vuex Quick Start Guide
  3. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Code in Action
      4. Conventions used
    4. Get in touch
      1. Reviews
  6. Rethinking User Interfaces with Flux, Vue, and Vuex
    1. MVC problems and the Flux solution
    2. What is Vuex?
    3. Understanding the Flux fundamentals
      1. Actions
      2. Dispatcher
      3. Stores
      4. Views
        1. Rendering data in the stores
        2. Stores and private components model
      5. Summarizing Flux architecture
    4. Benefits of using Flux
    5. Summary
  7. Implementing Flux Architecture with Vuex
    1. Technical requirements
    2. Vuex at a glance
    3. Boilerplate code for the examples
    4. Vue.js reactivity system explained
    5. Understanding the core concepts of Vuex
      1. Understanding the Vuex store
        1. Accessing the single state tree inside components
        2. The mapState helper
        3. Components' local state
      2. Computing a derived state with getters
        1. The mapGetters helper
      3. Changing the application state with mutations
        1. Commiting a mutation
        2. Enumerating mutation types using constant strings
        3. Mutations must be synchronous
        4. The mapMutations helper
      4. Committing mutations within actions
        1. Action declaration
        2. Dispatching an action
        3. The mapActions helper
      5. Using modules for better scalability
        1. Module local state
        2. Module with namespace
        3. Dynamic module registration
        4. Module reuse
    6. Enabling strict mode while developing
    7. Form handling restrictions when using Vuex
    8. A simple counter example
    9. Summary
  8. Setting Up Development and Test Environment
    1. Technical requirements
    2. Setting up the development environment
      1. Using npm to prepare the project for Vue/Vuex
      2. Using vue-loader for single-file components
      3. Configuring the test environment
    3. Summary
  9. Coding the EveryNote App Using Vuex State Management
    1. Technical requirements
    2. Designing the EveryNote web app
      1. Application structure
    3. Developing the EveryNote app
      1. Using a to-do list to help the development process
      2. Displaying a list of notes
      3. Creating new notes
      4. Deleting existing notes
      5. Updating existing notes
      6. Other features
      7. Recap and some considerations
    4. Synchronizing with a remote server
    5. Summary
  10. Debugging Vuex Applications
    1. Using vue-devtools
      1. Component inspector
      2. Events inspector
      3. Vuex time travel
    2. Enabling the Vuex built-in logger plugin
    3. Summary
  11. Using the Vuex Plugin System
    1. Technical requirements
    2. Understanding the Vuex plugin system
    3. Empowering EveryNote with two plugins
      1. Saving the app state with vuex-persistedstate
      2. Synchronizing router data with vuex-router-sync
    4. Developing a Google Analytics plugin
    5. Developing an undo/redo plugin
    6. Dealing with asynchronicity using promises
      1. Chaining promises
      2. Parallel execution of promises
      3. Common mistakes when using promises
    7. Summary
  12. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Vuex Quick Start Guide
  • Author(s): Andrea Koutifaris
  • Release date: April 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788999939