Book Image

Vue.js 2.x by Example

By : Mike Street
Book Image

Vue.js 2.x by Example

By: Mike Street

Overview of this book

Vue.js is a frontend web framework which makes it easy to do just about anything, from displaying data up to creating full-blown web apps, and has become a leading tool for web developers. This book puts Vue.js into a real-world context, guiding you through example projects that helps you build Vue.js applications from scratch. With this book, you will learn how to use Vue.js by creating three Single Page web applications. Throughout this book, we will cover the usage of Vue, for building web interfaces, Vuex, an official Vue plugin which makes caching and storing data easier, and Vue-router, a plugin for creating routes and URLs for your application. Starting with a JSON dataset, the first part of the book covers Vue objects and how to utilize each one. This will be covered by exploring different ways of displaying data from a JSON dataset. We will then move on to manipulating the data with filters and search and creating dynamic values. Next, you will see how easy it is to integrate remote data into an application by learning how to use the Dropbox API to display your Dropbox contents in an application In the final section, you will see how to build a product catalog and dynamic shopping cart using the Vue-router, giving you the building blocks of an e-commerce store.
Table of Contents (13 chapters)

Caching the folder contents

Now that we have Vuex in our app and are utilizing it for the path, we can begin to look at storing the contents of the currently-displayed folder so that if the user returns to the same place, the API does not need to be queried to retrieve the results. We are going to do this by storing the object returned by the API the Vuex store.

When the folder gets requested, the app will check whether the data exists in the store. If it does, the API call will be omitted and the data loaded from the storage. If it doesn't exist, the API will be queried and the results saved in the Vuex store.

The first step is to separate out the data processing into its own method. This is because the files and folders are going to need to be split regardless of whether the data comes from the store or API.

Create a new method in the dropbox-viewer component titled createFolderStructure...