Convert pinia stores from options API to composition API (#1330)

* Convert toastStore

* Convert workspaceStateStore

* Convert settingStore

* Convert queueStore

* Convert modelToNodeStore

* Convert modelStore

* Convert dialogStore

* nit

* nit

* nit

src/stores/queueStore.ts

@@ -14,6 +14,7 @@ import type { ComfyWorkflowJSON, NodeId } from '@/types/comfyWorkflow'
 import _ from 'lodash'
 import { defineStore } from 'pinia'
 import { toRaw } from 'vue'
+import { ref, computed } from 'vue'
 
 // Task type used in the API.
 export type APITaskType = 'queue' | 'history'
@@ -327,98 +328,103 @@ export class TaskItemImpl {
   }
 }
 
-interface State {
-  runningTasks: TaskItemImpl[]
-  pendingTasks: TaskItemImpl[]
-  historyTasks: TaskItemImpl[]
-  maxHistoryItems: number
-  isLoading: boolean
-}
+export const useQueueStore = defineStore('queue', () => {
+  const runningTasks = ref<TaskItemImpl[]>([])
+  const pendingTasks = ref<TaskItemImpl[]>([])
+  const historyTasks = ref<TaskItemImpl[]>([])
+  const maxHistoryItems = ref(64)
+  const isLoading = ref(false)
 
-export const useQueueStore = defineStore('queue', {
-  state: (): State => ({
-    runningTasks: [],
-    pendingTasks: [],
-    historyTasks: [],
-    maxHistoryItems: 64,
-    isLoading: false
-  }),
-  getters: {
-    tasks(state) {
-      return [
-        ...state.pendingTasks,
-        ...state.runningTasks,
-        ...state.historyTasks
-      ]
-    },
-    flatTasks(): TaskItemImpl[] {
-      return this.tasks.flatMap((task: TaskItemImpl) => task.flatten())
-    },
-    lastHistoryQueueIndex(state) {
-      return state.historyTasks.length ? state.historyTasks[0].queueIndex : -1
-    },
-    hasPendingTasks(state) {
-      return state.pendingTasks.length > 0
-    }
-  },
-  actions: {
-    // Fetch the queue data from the API
-    async update() {
-      this.isLoading = true
-      try {
-        const [queue, history] = await Promise.all([
-          api.getQueue(),
-          api.getHistory(this.maxHistoryItems)
-        ])
+  const tasks = computed(() => [
+    ...pendingTasks.value,
+    ...runningTasks.value,
+    ...historyTasks.value
+  ])
 
-        const toClassAll = (tasks: TaskItem[]): TaskItemImpl[] =>
-          tasks
-            .map(
-              (task: TaskItem) =>
-                new TaskItemImpl(
-                  task.taskType,
-                  task.prompt,
-                  task['status'],
-                  task['outputs'] || {}
-                )
-            )
-            // Desc order to show the latest tasks first
-            .sort((a, b) => b.queueIndex - a.queueIndex)
+  const flatTasks = computed(() =>
+    tasks.value.flatMap((task: TaskItemImpl) => task.flatten())
+  )
 
-        this.runningTasks = toClassAll(queue.Running)
-        this.pendingTasks = toClassAll(queue.Pending)
+  const lastHistoryQueueIndex = computed(() =>
+    historyTasks.value.length ? historyTasks.value[0].queueIndex : -1
+  )
 
-        // Process history items
-        const allIndex = new Set(
-          history.History.map((item: TaskItem) => item.prompt[0])
-        )
-        const newHistoryItems = toClassAll(
-          history.History.filter(
-            (item) => item.prompt[0] > this.lastHistoryQueueIndex
+  const hasPendingTasks = computed(() => pendingTasks.value.length > 0)
+
+  const update = async () => {
+    isLoading.value = true
+    try {
+      const [queue, history] = await Promise.all([
+        api.getQueue(),
+        api.getHistory(maxHistoryItems.value)
+      ])
+
+      const toClassAll = (tasks: TaskItem[]): TaskItemImpl[] =>
+        tasks
+          .map(
+            (task: TaskItem) =>
+              new TaskItemImpl(
+                task.taskType,
+                task.prompt,
+                task['status'],
+                task['outputs'] || {}
+              )
           )
-        )
-        const existingHistoryItems = this.historyTasks.filter(
-          (item: TaskItemImpl) => allIndex.has(item.queueIndex)
-        )
-        this.historyTasks = [...newHistoryItems, ...existingHistoryItems]
-          .slice(0, this.maxHistoryItems)
           .sort((a, b) => b.queueIndex - a.queueIndex)
-      } finally {
-        this.isLoading = false
-      }
-    },
-    async clear(targets: ('queue' | 'history')[] = ['queue', 'history']) {
-      if (targets.length === 0) {
-        return
-      }
-      await Promise.all(targets.map((type) => api.clearItems(type)))
-      await this.update()
-    },
-    async delete(task: TaskItemImpl) {
-      await api.deleteItem(task.apiTaskType, task.promptId)
-      await this.update()
+
+      runningTasks.value = toClassAll(queue.Running)
+      pendingTasks.value = toClassAll(queue.Pending)
+
+      const allIndex = new Set(
+        history.History.map((item: TaskItem) => item.prompt[0])
+      )
+      const newHistoryItems = toClassAll(
+        history.History.filter(
+          (item) => item.prompt[0] > lastHistoryQueueIndex.value
+        )
+      )
+      const existingHistoryItems = historyTasks.value.filter(
+        (item: TaskItemImpl) => allIndex.has(item.queueIndex)
+      )
+      historyTasks.value = [...newHistoryItems, ...existingHistoryItems]
+        .slice(0, maxHistoryItems.value)
+        .sort((a, b) => b.queueIndex - a.queueIndex)
+    } finally {
+      isLoading.value = false
     }
   }
+
+  const clear = async (
+    targets: ('queue' | 'history')[] = ['queue', 'history']
+  ) => {
+    if (targets.length === 0) {
+      return
+    }
+    await Promise.all(targets.map((type) => api.clearItems(type)))
+    await update()
+  }
+
+  const deleteTask = async (task: TaskItemImpl) => {
+    await api.deleteItem(task.apiTaskType, task.promptId)
+    await update()
+  }
+
+  return {
+    runningTasks,
+    pendingTasks,
+    historyTasks,
+    maxHistoryItems,
+    isLoading,
+
+    tasks,
+    flatTasks,
+    lastHistoryQueueIndex,
+    hasPendingTasks,
+
+    update,
+    clear,
+    delete: deleteTask
+  }
 })
 
 export const useQueuePendingTaskCountStore = defineStore(