Use Vuex to load and add notes.

src/components/NoteList.vue

@@ -19,24 +19,25 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   data() {
     return {
-      notes: [
-        { id: 0, text: 'This is a note' },
-        { id: 1, text: 'And another one.' }
-      ],
       current: null,
       content: null
     }
   },
   methods: {
     addNote() {
-      this.notes.push({ id: this.notes.length, text: this.content })
+      this.$store.commit('ADD_NOTE', {
+        id: this.notes.length,
+        text: this.content
+      })
       this.content = ''
     }
   },
-  computed: {},
+  computed: mapState(['notes']),
   mounted() {
     document.addEventListener('keyup', e => {
       switch (e.code) {

src/main.js

@@ -1,4 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import store from './store/index.js'
 
-window.app = createApp(App).mount('#app')
+window.app = createApp(App)
+  .use(store)
+  .use(store)
+  .mount('#app')

src/store/index.js

@@ -0,0 +1,23 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state() {
+    return {
+      notes: [{ id: 1, text: 'A note from the Vuex store!' }]
+    }
+  },
+  mutations: {
+    FETCH_NOTES(state) {
+      state.notes = [
+        {
+          id: 1,
+          text: 'Note loaded via mutation from Vuex!'
+        }
+      ]
+    },
+    ADD_NOTE(state, note) {
+      state.notes.push(note)
+    }
+  },
+  actions: {}
+})