23,99 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 126
Veröffentlichungsjahr: 2018
Ähnliche
Vuex Quick Start Guide
Copyright © 2018 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editors: Kunal ChaudhariAcquisition Editor: Noyonika DasContent Development Editors: Aditi GourTechnical Editor: Sushmeeta JenaCopy Editor: Safis EditingProject Coordinator: Hardik BhindeProofreader: Safis EditingIndexers: Pratik ShirodkarGraphics: Jason MonteiroProduction Coordinator: Aparna Bhagat
First published: April 2018
Production reference: 1040418
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78899-993-9
www.packtpub.com
Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Mapt is fully searchable
Copy and paste, print, and bookmark content
PacktPub.com
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
Contributors
About the author
Andrea Koutifaris has a passion for programming, which he likes to say is in his DNA. At the age of thirteen, he began using his father's laptop to write his own programs. After graduating high school, he enrolled, without a second thought, at the University of Florence, Faculty of Computer Engineering. After being a Java developer for some years, Andrea gradually moved to frontend development, which is still his passion today. Having spent too much time fixing problems with messed up code, he is obsessed with good programming and test-driven development which, in his opinion, is the only way to write production-quality code.
About the reviewer
Francesco Strazzullo is a frontend engineer and trainer for Extrategy. He loves to share what he learns in his job by writing on his blog or presenting some new talk at a conference or some local JavaScript user group. During his free time, he likes to relax by playing with his PlayStation or cooking.
Bogdan, a tech lead with a passion for UI technologies, has worked with JavaScript for the past 12 years, from the emergence of jQuery and Ajax to state-of-the-art solutions such as React, Angular, Ember.js, and Vue.js. When not fiddling with some new coding challenge, he spends his time watching sports or movies with friends and family.
Nowadays he channels most of his efforts into making we3interactive one of the most successful and creative startups in Cluj.
His passion for Vue.js pushed him to collaborate on great books such as Learning Vue.js, Vue.js 2 Cookbook, and Vue.js by Example.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
Vuex Quick Start Guide
Packt Upsell
Why subscribe?
PacktPub.com
Contributors
About the author
About the reviewer
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Code in Action
Conventions used
Get in touch
Reviews
Rethinking User Interfaces with Flux, Vue, and Vuex
MVC problems and the Flux solution
What is Vuex?
Understanding the Flux fundamentals
Actions
Dispatcher
Stores
Views
Rendering data in the stores
Stores and private components model
Summarizing Flux architecture
Benefits of using Flux
Summary
Implementing Flux Architecture with Vuex
Technical requirements
Vuex at a glance
Boilerplate code for the examples
Vue.js reactivity system explained
Understanding the core concepts of Vuex
Understanding the Vuex store
Accessing the single state tree inside components
The mapState helper
Components' local state
Computing a derived state with getters
The mapGetters helper
Changing the application state with mutations
Commiting a mutation
Enumerating mutation types using constant strings
Mutations must be synchronous
The mapMutations helper
Committing mutations within actions
Action declaration
Dispatching an action
The mapActions helper
Using modules for better scalability
Module local state
Module with namespace
Dynamic module registration
Module reuse
Enabling strict mode while developing
Form handling restrictions when using Vuex
A simple counter example
Summary
Setting Up Development and Test Environment
Technical requirements
Setting up the development environment
Using npm to prepare the project for Vue/Vuex
Using vue-loader for single-file components
Configuring the test environment
Summary
Coding the EveryNote App Using Vuex State Management
Technical requirements
Designing the EveryNote web app
Application structure
Developing the EveryNote app
Using a to-do list to help the development process
Displaying a list of notes
Creating new notes
Deleting existing notes
Updating existing notes
Other features
Recap and some considerations
Synchronizing with a remote server
Summary
Debugging Vuex Applications
Using vue-devtools
Component inspector
Events inspector
Vuex time travel
Enabling the Vuex built-in logger plugin
Summary
Using the Vuex Plugin System
Technical requirements
Understanding the Vuex plugin system
Empowering EveryNote with two plugins
Saving the app state with vuex-persistedstate
Synchronizing router data with vuex-router-sync
Developing a Google Analytics plugin
Developing an undo/redo plugin
Dealing with asynchronicity using promises
Chaining promises
Parallel execution of promises
Common mistakes when using promises
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
Preface
Vuex is a centralized state management architecture for building client-side web applications. It exploits the Vue.js reactivity system to perfectly integrate into Vue.js applications.
In this book, you will understand why centralized state management is important, how it works, and how you can empower your Vue.js applications with Vuex. Finally, you will learn about the Vuex plugin system and use it to enrich your Vuex applications.
Who this book is for
This book targets Vue.js developers who want to understand and use Vuex centralized state management architecture in their applications.
What this book covers
Chapter 1, Rethinking User Interfaces with Flux, Vue, and Vuex, introduces the concepts of Flux architecture and the small differences in Vuex implementation.
Chapter 2, Implementing Flux Architecture with Vuex, teaches the core concepts of Vuex, and we learn how we can use them with small executable examples.
Chapter 3, Setting Up Development and Test Environment, shows how to use webpack and npm to prepare our environment for developing and testing a Vue/Vuex application.
Chapter 4, Coding the EveryNote App Using Vuex State Management, explains how to develop an application to take notes, using all the concepts from Vuex we've just learned. In addition, we use karma to test all the components of the application.
Chapter 5, Debugging Vuex Applications, says that even by testing every component, sometimes debugging is necessary. We will understand how to use Chrome Developer tools and vue-devtools to debug our applications.
Chapter 6, Using the Vuex Plugin System, enriches the EveryNote app with some useful Vuex plugins, including two custom plugins developed from scratch.
To get the most out of this book
In this book, we assume that the reader has good knowledge of the Vue.js framework, a good knowledge of JavaScript, and basic knowledge of EcmaScript 6.
In addition, to run the examples, the reader needs to install Node.js and have a very basic understanding of node package manager (npm).
Finally, to use the Git repository of this book, the user needs to install Git and have a basic understanding of Git commands.
Download the example code files
You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packtpub.com
.
Select the
SUPPORT
tab.
Click on
Code Downloads & Errata
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub athttps://github.com/PacktPublishing/Vuex-Quick-Start-Guide. We also have other code bundles from our rich catalog of books and videos available athttps://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: http://www.packtpub.com/sites/default/files/downloads/VuexQuickStartGuide.
Code in Action
Visit the following link to check out videos of the code being run:https://goo.gl/8WLxhs
Conventions used
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."
A block of code is set as follows:
html, body, #map { height: 100%; margin: 0; padding: 0}
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
[default]exten => s,1,Dial(Zap/1|30)exten => s,2,Voicemail(u100)
exten => s,102,Voicemail(b100)
exten => i,1,Voicemail(s0)
Any command-line input or output is written as follows:
$ mkdir css
$ cd css
Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."
Get in touch
Feedback from our readers is always welcome.
General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packtpub.com.
Rethinking User Interfaces with Flux, Vue, and Vuex
I started my first job as a Java EE programmer at the end of 2007. I still remember my friend Giuseppe saying, You don't like JavaScript, do you? and me answering, No, I don't. Each time I write something in JavaScript, it doesn't work in all versions of Internet Explorer... not to mention Firefox! He just replied, Have a look at jQuery. Today, I like to call myself a JavaScript programmer.
Since then, web development has evolved a lot. A number of JavaScript frameworks became popular and then declined because new frameworks emerged. You may think that it is not worthlearning new frameworks since they will eventually decline in popularity. Well, in my opinion, that is not true. Each framework added something useful to web development, something that we still use. For example, jQuery made use of JavaScript that was so simple that we started moving client logic to the browser instead of rendering everything server-side.
