From 6aa5105c48e55a9decfc4dac4d2a9b64c06a9fdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= <lukas@kucharczyk.xyz>
Date: Mon, 7 Sep 2020 19:58:02 +0200
Subject: [PATCH] Use Vuex to load and add notes.

---
 src/components/NoteList.vue | 13 +++++++------
 src/main.js                 |  6 +++++-
 src/store/index.js          | 23 +++++++++++++++++++++++
 3 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/store/index.js

diff --git a/src/components/NoteList.vue b/src/components/NoteList.vue
index c2ca6c2..b15bdc4 100644
--- a/src/components/NoteList.vue
+++ b/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) {
diff --git a/src/main.js b/src/main.js
index 9733926..384b890 100644
--- a/src/main.js
+++ b/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')
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..fe7065a
--- /dev/null
+++ b/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: {}
+})