Lesson 3 - Data Store Setup

Overview

To handle state management in smaller to medium Vue applications, one common pattern is to use a global store defined on the window object for access throughout the app. You can then assign any shared object to be a property on a Vue instance's data source and it will automatically be converted to a reactive variable.

Create a Global Store

  1. Open ~src/main.js and add the following store object to the global window object: bottom of the file:

     // Set up a global store
     const favorites = [];
     const favoritesById = [];
    
     // Global store defaults
     window.store = {
       images: [],
       imagesById: {},
       favorites,
       favoritesById
     };
    
    The variables held in this global store will manage the array of images returned from the Stock API and those that were favorited, as well as two variables to access an object from one of those arrays by ID.

Resources:

Edit this page on GitHub