Refactor axios code into service.

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==",
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
-      "dev": true
     },
     "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/main.js

@@ -3,6 +3,5 @@ import App from './App.vue'
 import store from './store/index.js'
 
 window.app = createApp(App)
-  .use(store)
   .use(store)
   .mount('#app')

src/services/NoteService.js

@@ -0,0 +1,16 @@
+import axios from 'axios'
+
+const apiClient = axios.create({
+  baseURL: 'http://localhost:3000',
+  withCredentials: false,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+  }
+})
+
+export default {
+  getNotes() {
+    return apiClient.get('/notes')
+  }
+}

src/store/index.js

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