save state to LS

Author: MrMohebi

app.vue

@@ -5,7 +5,23 @@
 </template>
 
 <script setup lang="ts">
-const { locale } = useI18n()
+import {useNutrientsStore} from "~/composables/nutrients/nutrients.store";
+import {MEALS_LS} from "~/consts/keys";
+
+const { locale, setLocaleCookie } = useI18n()
+const nutrientsStore = useNutrientsStore()
 
 const rtlNeededLanguages = ['fa']
+
+nutrientsStore.$subscribe((mutation, state) => {
+  localStorage.setItem(MEALS_LS, JSON.stringify(state))
+})
+onMounted(()=>{
+  nutrientsStore.loadFromLS()
+})
+
+watch(locale,(value)=>{
+  setLocaleCookie(value)
+})
+
 </script>

composables/nutrients/nutrients.store.ts

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import type {IMeal} from "~/composables/nutrients/nutrients.interface";
+import {MEALS_LS} from "~/consts/keys";
 
 export interface INutrientsStore {
     meals:IMeal[]
@@ -27,5 +28,20 @@ export const useNutrientsStore = defineStore("nutrients", {
         ]
     }),
     getters: {},
-    actions: {},
+    actions: {
+        loadFromLS(){
+            if(typeof localStorage != "undefined"){
+                const savedData = localStorage.getItem(MEALS_LS)
+                if(!savedData || savedData.length <= 0){
+                    return
+                }
+                const savedDataParsed:INutrientsStore = JSON.parse(savedData)
+                if(!(savedDataParsed?.meals.length > 0)){
+                    return
+                }
+
+                this.meals = structuredClone(savedDataParsed.meals)
+            }
+        }
+    },
 });

consts/keys.ts

@@ -0,0 +1 @@
+export const MEALS_LS = "dc"

nuxt.config.ts

@@ -20,6 +20,12 @@ export default defineNuxtConfig({
   },
   i18n: {
     // Module Options
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'dc-lang',
+      redirectOn: 'root',
+      fallbackLocale: 'fa'
+    },
   },
   css: [
     'primevue/resources/themes/aura-light-green/theme.css',