Add notes store

frontend/pages/notes.vue

@@ -6,7 +6,6 @@
             :loading="loading"
             loading-text="Loading notes..."
             class="elevation-1"
-            disable-sort
             :footer-props="{
                 showFirstLastPage: false,
                 prevIcon: mdiChevronLeft,
@@ -19,7 +18,7 @@
                         Notes
                     </h2>
                     <v-spacer></v-spacer>
-                    <v-btn to="/create" outlined dark>
+                    <v-btn outlined dark @click="test">
                         New Note
                     </v-btn>
                 </v-toolbar>
@@ -65,7 +64,7 @@
                     small
                     color="secondary"
                     dark
-                    @click="deleteItem(item)"
+                    @click="deleteNote(item)"
                 >
                     {{ mdiDelete }}
                 </v-icon>
@@ -79,6 +78,7 @@
 
 <script>
 import { format } from 'timeago.js'
+import { mapState, mapActions } from 'vuex'
 import {
     mdiEye,
     mdiPencil,
@@ -89,10 +89,6 @@ import {
 
 export default {
     name: 'Notes',
-    async asyncData(context) {
-        const notes = await context.$axios.$get('/notes')
-        return { notes, loading: false }
-    },
     data: () => ({
         mdiEye,
         mdiPencil,
@@ -107,21 +103,24 @@ export default {
             { text: 'Actions', value: 'actions' },
         ],
     }),
+    computed: {
+        ...mapState('notes', { notes: (state) => state.notes }),
+    },
+    mounted() {
+        this.$store.dispatch('notes/load').then(() => (this.loading = false))
+    },
     methods: {
-        async loadNotes() {
-            await this.$axios.$get('/notes').then((notes) => {
-                this.notes = notes
-                this.loading = false
-            })
-        },
+        ...mapActions({
+            deleteNote: 'notes/delete',
+            createNote: 'notes/create',
+        }),
         editItem(item) {},
-        async deleteItem(item) {
-            try {
-                await this.$axios.delete(`/notes/${item.uuid}`)
-            } catch (_) {
-            } finally {
-                await this.loadNotes()
-            }
+        test() {
+            this.createNote({
+                title: 'title',
+                tags: [],
+                chapters: [],
+            })
         },
         format,
     },