add persistent pinia store

Author: hipertracker

README.md

@@ -40,6 +40,9 @@ npx nuxi info
 
 ## Updates
 
-* Added Vuetify, Pinia store and ToggleDarkMode component
+* Add persistent Pinia store
 
 * Issue resolved! The problem stemmed from an outdated version of Vue Devtools that Google Chrome and Brave had detected. The solution was to download and install the extension directly from the official website: https://devtools.vuejs.org/guide/installation.html
+
+* Added Vuetify, Pinia store and ToggleDarkMode component
+

components/ToggleDarkMode.vue

@@ -1,14 +1,20 @@
 <script lang="ts" setup>
-import {useTheme} from "vuetify";
-import {useMainStore} from "~/stores/main";
+import { useTheme } from "vuetify";
+import { useMainStore } from "~/stores/main";
 
 const theme = useTheme();
 const store = useMainStore();
-const {darkMode} = toRefs(store);
+
+const { darkMode } = toRefs(store);
 
 function toggleTheme() {
-  store.toggleDarkMode(theme);
+  store.toggleDarkMode();
+  theme.global.name.value = darkMode.value ? "dark" : "light";
 }
+
+onMounted(() => {
+  theme.global.name.value = darkMode.value ? "dark" : "light";
+});
 </script>
 
 <template>

stores/main.ts

@@ -1,22 +1,21 @@
-import {defineStore} from 'pinia'
+import { defineStore } from 'pinia';
 
 export const useMainStore = defineStore('main', () => {
     const darkMode = ref(true);
 
-    const currentTheme = computed(() => {
-        return darkMode.value ? 'dark' : 'light';
-    });
+    console.log('isServer', typeof window === 'undefined');
 
-
-    function toggleDarkMode(theme: { global: { name: { value: string; }; }; }) {
+    function toggleDarkMode () {
         darkMode.value = !darkMode.value;
-        theme.global.name.value = currentTheme.value
     }
 
     return {
-        currentTheme,
         darkMode,
         toggleDarkMode,
     };
-}, {persist: true});
+}, {
+    persist: {
+        storage: persistedState.localStorage,
+    }
+});