Adding comments

README.md

@@ -18,6 +18,20 @@
 3. Run `npm start`.
 4. Navigate to `http://localhost:8080`
 
+## Resources
+
+Here are some software projects / technologies that are used in this
+application:
+
+1. [VueJS](https://vuejs.org): JavaScript framework.
+2. [Vue Router](https://router.vuejs.org): VueJS routing library for Single
+   Page Applications (SPA).
+3. [Vuex](https://vuex.vuejs.org): State management library.
+4. [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API):
+   HTTP request API that is
+   [polyfilled](https://en.wikipedia.org/wiki/Polyfill_(programming)) by
+   [Unfetch]( https://npm.im/unfetch).
+
 ## Testing
 
 Run all tests:
@@ -52,6 +66,6 @@ npx cypress open
 
 ## Acknowledgement
 
-* Data is from [The Star Wars API (SWAPI)](https://swapi.co/).
+* Data is from [The Star Wars API (SWAPI)](https://swapi.co).
 * Images are from [Star Wars: A Visual Guide](https://starwars-visualguide.com).
 * This is a sequel to [force-vue](https://github.com/alexkramer/force-vue).

src/router.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
+// Instruct Vue to use the router plugin.
 Vue.use(VueRouter)
 
 const Home = () => import('@/components/Home')
 const Person = () => import('@/components/Person')
 
+// Export a new Vue Router instance to be used in the application.
 export default new VueRouter({
   routes: [
     {

src/store/index.js

@@ -3,9 +3,13 @@ import Vuex from 'vuex'
 
 import people from '@/store/people'
 
+// Instruct Vue to use the Vuex plugin.
 Vue.use(Vuex)
 
+// Export a new Vuex Store instance to be used in the application.
 export default new Vuex.Store({
+  // Modules are mini-state stores that can be combined into the main state
+  // tree: https://vuex.vuejs.org/guide/modules.html
   modules: {
     people
   }

src/store/people.js

@@ -2,20 +2,30 @@ const initialState = () => ({
   results: []
 })
 
+// Export the module so it can be included in the main store.
 export default {
+  // This module is namespaced so that it is a little more self-contained:
+  // https://vuex.vuejs.org/guide/modules.html#namespacing
   namespaced: true,
+  // https://vuex.vuejs.org/guide/state.html
   state: initialState,
+  // https://vuex.vuejs.org/guide/mutations.html
   mutations: {
     results: (state, results = []) => (state.results = results)
   },
+  // https://vuex.vuejs.org/guide/actions.html
   actions: {
     async list ({ commit }, page = 1) {
+      // Fetch People from SWAPI and await the response.
       const response = await fetch('https://swapi.co/api/people')
+      // Parse the JSON string returned in the response into a JavaScript
+      // object and destructure the results property out of that object.
       const { results } = await response.json()
       if (response.ok) {
+        // If the response is OK commit the data to the store.
         commit('results', results)
       } else {
-        // TODO
+        // If the response is not OK, log the response to the console.
         console.error(response)
       }
     }