feat: Add persist option to useCounterStore

src/main.ts

@@ -1,13 +1,13 @@
 import './assets/main.css';
+
 import 'virtual:uno.css';
 
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
 import { createHead } from '@unhead/vue';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 
+import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 import App from './App.vue';
 import { router } from './router';
-import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 
 async function init() {
   if (import.meta.env.MODE === 'development' || 1 === 1) {
@@ -25,7 +25,7 @@ async function init() {
 
   const app = createApp(App)
     .use(createHead())
-    .use(createPinia())
+    .use(createPinia().use(piniaPluginPersistedstate))
     // Register the plugin before the router
     .use(DataLoaderPlugin, { router })
     // adding the router will trigger the initial navigation

src/stores/counter.ts

@@ -1,12 +1,18 @@
 import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
 
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0);
-  const doubleCount = computed(() => count.value * 2);
-  function increment() {
-    count.value++;
-  }
+export const useCounterStore = defineStore(
+  'counter',
+  () => {
+    const count = ref(0);
+    const doubleCount = computed(() => count.value * 2);
+    function increment() {
+      count.value++;
+    }
 
-  return { count, doubleCount, increment };
-});
+    return { count, doubleCount, increment };
+  },
+  {
+    persist: true,
+  },
+);