add outside click handler and persistent store through vueuse

package.json

@@ -13,6 +13,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@vueuse/components": "^10.9.0",
+    "@vueuse/core": "^10.9.0",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5"

src/components/TaskForm.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useTaskStore, type Task } from '@/stores/tasks'
 import { ref } from 'vue'
+import { vOnClickOutside } from '@vueuse/components'
 
 const emit = defineEmits(['close'])
 const props = defineProps<{ taskId: string }>()
@@ -33,7 +34,7 @@ function escHandler() {
 </script>
 
 <template>
-  <div class="task">
+  <div class="task" v-on-click-outside="escHandler">
     <input
       type="text"
       class="myinput"

src/stores/tasks.ts

@@ -1,3 +1,4 @@
+import { useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 
 export interface Task {
@@ -6,30 +7,23 @@ export interface Task {
 }
 
 export const useTaskStore = defineStore('task', {
-  state: (): { tasks: Task[] } => ({
-    tasks: JSON.parse(localStorage.getItem('tasks') || '[]') || []
+  state: () => ({
+    tasks: useLocalStorage('tasks', [] as Task[])
   }),
   actions: {
-    persistToLocalStorage() {
-      localStorage.setItem('tasks', JSON.stringify(this.tasks))
-    },
     addTask(task: Task) {
       this.tasks.push(task)
-      this.persistToLocalStorage()
     },
     removeTask(id: string) {
       this.tasks = this.tasks.filter((task) => task.id !== id)
-      this.persistToLocalStorage()
     },
     updateTask(updatedTask: Task) {
       const index = this.tasks.findIndex((task) => task.id === updatedTask.id)
       if (index !== -1) {
         this.tasks[index] = updatedTask
       }
-      this.persistToLocalStorage()
     },
     getTaskById(id: string) {
-      this.persistToLocalStorage()
       return this.tasks.find((task) => task.id === id)
     }
   }

src/views/HomeView.vue

@@ -16,7 +16,7 @@ import PiniaPicture from '@/components/icons/PiniaPicture.vue'
       <span>с использованием Pinia</span>
       <PiniaPicture />
     </div>
-    <div class="last">"Таск-менеджер"</div>
+    <div class="last">Переходи на "Список Задач"</div>
   </h2>
 </template>