feat: add localstorage saving

src/stores/movie-store.js

@@ -1,28 +1,40 @@
 import { defineStore } from 'pinia';
+import { computed, ref, watch } from 'vue';
 
-export const useMovieStore = defineStore('movieStore', {
+export const useMovieStore = defineStore('movieStore', () => {
-  state: () => ({
+  const movies = ref([]);
-    movies: [],
+  const activeTab = ref(1);
-    activeTab: 1,
+
-  }),
+  const moviesOnLocalStorage = localStorage.getItem('movies');
-  getters: {
+  if (moviesOnLocalStorage) {
-    watchedMovies: (store) => {
+    movies.value = JSON.parse(moviesOnLocalStorage)
-      return store.movies.filter((el) => el.isWatched)
+  }
-    },
+
-    totalCount: (store) => {
+  const watchedMovies = computed(() => movies.value.filter((el) => el.isWatched))
-      return store.movies.length
+  const totalCount = computed(() => movies.value.length);
-    }
+
-  },
+  const setActiveTab = (tab) => activeTab.value = tab;
-  actions: {
+
-    setActiveTab(tab) {
+  const toggleWatchedMovie = (id) => {
-      this.activeTab = tab
+    const movie = movies.value.find((el) => el.id === id);
-    },
+    movie.isWatched = !movie.isWatched
-    toggleWatchedMovie(id) {
+  };
-      const movie = this.movies.find((el) => el.id === id);
+
-      movie.isWatched = !movie.isWatched
+  const removeMovie = (id) => {
-    },
+    movies.value = movies.value.filter((el) => el.id !== id)
-    removeMovie(id) {
+  }
-      this.movies = this.movies.filter((el) => el.id !== id)
+
-    }
+  watch(movies, () => {
+    localStorage.setItem('movies', JSON.stringify(movies.value));
+  }, {deep: true})
+
+  return {
+    movies,
+    activeTab,
+    watchedMovies,
+    totalCount,
+    setActiveTab,
+    toggleWatchedMovie,
+    removeMovie,
   }
 })

src/stores/search-store.js

@@ -1,37 +1,41 @@
 import { defineStore } from 'pinia';
 import { useMovieStore } from './movie-store.js';
+import { ref } from 'vue';
 
 const url = `https:api.themoviedb.org/3/search/movie?api_key=${import.meta.env.VITE_API_KEY}&query=`;
 
-export const useSearchStore = defineStore('search-store', {
+export const useSearchStore = defineStore('search-store', () => {
-  state: () => ({
+  const loading = ref(false);
-    movies: [],
+  const movies = ref([]);
-    timer: null,
+  const movieStore = useMovieStore();
-    loading: false,
-  }),
-  actions: {
-    async getMovies(search) {
-      const request = async () => {
-        const res = await fetch(url + search);
-        const data = await res.json();
 
-        this.movies = data.results
+  const getMovies = async (search) => {
-      }
+    const request = async () => {
+      const res = await fetch(url + search);
+      const data = await res.json();
 
-      try {
+      movies.value = data.results
-        clearTimeout(this.timer);
+    }
-        this.loading = true;
+
-        await request();
+    try {
-      } catch (e) {
+      loading.value = true;
-        console.log('error', e);
+      await request();
-      } finally {
+    } catch (e) {
-        this.loading = false;
+      console.log('error', e);
-      }
+    } finally {
-    },
+      loading.value = false;
-    addToUserMovies(obj) {
-      const movieStore = useMovieStore();
-      movieStore.movies.push(obj);
-      movieStore.setActiveTab(1);
     }
   }
+
+  const addToUserMovies = (obj) => {
+    movieStore.movies.push(obj);
+    movieStore.setActiveTab(1);
+  }
+
+  return {
+    getMovies,
+    addToUserMovies,
+    loading,
+    movies,
+  }
 })