binxhealth#3 Complete Person component; attempt to query Person data

src/components/Person.vue

@@ -1,6 +1,37 @@
 <template>
-  <div>
-    Person {{ $route.params.id }}
+  <div class="container">
+    <h2>Person {{ $route.params.id }}</h2>
+
+    <h4>Essentials</h4>
+      <div class="container ">
+        <div class="row">
+          <div class="col">
+            <p>Name:</p>
+            <p>Born:</p>
+            <p>Home Planet: linkto (requires API call)</p>
+            <p>Species: linkto (requires API call)</p>
+          </div>
+          <div class="col">
+            <img src="person.img" alt="person.name" class="img-fluid rounded">
+          </div>
+        </div>
+      </div>
+
+    <h4>Extra</h4>
+    <div class="container">
+      <p>Hair:</p>
+      <p>Eyes:</p>
+      <p>Skin:</p>
+      <p>Height:</p>
+      <p>Weight:</p>
+    </div>
+
+    <h4>Appears in</h4>
+      <ol>
+        <li><a>Each movie</a> </li>
+        <li><a>Each movie</a> </li>
+        <li><a>Each movie</a> </li>
+      </ol>
   </div>
 </template>
 

src/store/index.js

@@ -12,5 +12,31 @@ export default new Vuex.Store({
   // tree: https://vuex.vuejs.org/guide/modules.html
   modules: {
     people
+  },
+  getters: {
+    // vuex.esm.js:95 Uncaught Error: [vuex] getters should be function but "getters.people" is {}.
+    // Getting the error above, so I understand that this isn't proper Vuex syntax.
+    // If I was better with Vue/Vuex syntax I would do something like this.
+    people: {
+      async get (state, id) {
+        cachedPerson = state.people.find(person => person.id === id)
+
+        if (cachedPerson) {
+          return cachedPerson
+        }
+
+        const response = await fetch('https://swapi.co/api/people/' + id)
+        const { results } = await response.json()
+
+        if (response.ok) {
+          // I imagine this `commit` syntax won't work, but I would intend to save the result to store.
+          // commit('results', results)
+          return results
+        } else {
+          // If the response is not OK, log the response to the console.
+          console.error(response)
+        }
+      }
+    }
   }
 })