Load notes from local json file.

db.json

@@ -0,0 +1,8 @@
+{
+  "notes": [
+    {
+      "id": 1,
+      "text": "This note is from the db.json file!"
+    }
+  ]
+}

package-lock.json

@@ -2616,6 +2616,14 @@
       "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
+      "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -5621,8 +5629,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
-      "dev": true
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
     },
     "for-in": {
       "version": "1.0.2",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.20.0",
     "core-js": "^3.6.5",
     "vue": "^3.0.0-rc.10",
     "vuex": "^4.0.0-0"

src/components/NoteList.vue

@@ -82,6 +82,7 @@ export default {
           break
       }
     })
+    this.$store.commit('FETCH_NOTES')
   }
 }
 </script>

src/store/index.js

@@ -1,4 +1,5 @@
 import { createStore } from 'vuex'
+import axios from 'axios'
 
 export default createStore({
   state() {
@@ -8,12 +9,14 @@ export default createStore({
   },
   mutations: {
     FETCH_NOTES(state) {
-      state.notes = [
-        {
-          id: 1,
-          text: 'Note loaded via mutation from Vuex!'
-        }
-      ]
+      axios
+        .get('http://localhost:3000/notes')
+        .then(response => {
+          state.notes = response.data
+        })
+        .catch(error => {
+          console.log('There was an error:', error.response)
+        })
     },
     ADD_NOTE(state, note) {
       state.notes.push(note)