src/stores/attachments.ts

@@ -1,34 +1,34 @@
+import {ref, readonly} from 'vue'
 import {defineStore, acceptHMRUpdate} from 'pinia'
 import {findIndexById} from '@/helpers/utils'
 
 import type {IAttachment} from '@/modelTypes/IAttachment'
 
-export interface AttachmentState {
+export const useAttachmentStore = defineStore('attachment', () => {
-	attachments: IAttachment[],
+	const attachments = ref<IAttachment[]>([])
-}
 
-export const useAttachmentStore = defineStore('attachment', {
+	function set(newAttachments: IAttachment[]) {
-	state: (): AttachmentState => ({
+		console.debug('Set attachments', newAttachments)
-		attachments: [],
+		attachments.value = newAttachments
-	}),
+	}
 
-	actions: {
+	function add(attachment: IAttachment) {
-		set(attachments: IAttachment[]) {
+		console.debug('Add attachement', attachment)
-			console.debug('Set attachments', attachments)
+		attachments.value.push(attachment)
-			this.attachments = attachments
+	}
-		},
 
-		add(attachment: IAttachment) {
+	function removeById(id: IAttachment['id']) {
-			console.debug('Add attachement', attachment)
+		const attachmentIndex = findIndexById(attachments.value, id)
-			this.attachments.push(attachment)
+		attachments.value.splice(attachmentIndex, 1)
-		},
+		console.debug('Remove attachement', id)
+	}
 
-		removeById(id: IAttachment['id']) {
+	return {
-			const attachmentIndex = findIndexById(this.attachments, id)
+		attachments: readonly(attachments),
-			this.attachments.splice(attachmentIndex, 1)
+		set,
-			console.debug('Remove attachement', id)
+		add,
-		},
+		removeById,
-	},
+	}
 })
 
 // support hot reloading