ok

nuxt.config.ts

@@ -3,9 +3,15 @@ export default defineNuxtConfig({
 
     plugins:[
     {src: '~/plugins/Vue3Lottie.client', mode: 'client'},
-    {src: '~/plugins/AudioVisual.client', mode: 'client'}
+    {src: '~/plugins/AudioVisual.client', mode: 'client'},
+    {src: '~/plugins/PiniaPlugin', mode: 'client'},
 ],
+    modules: [
+        // ...
 
+            '@pinia/nuxt'
+
+    ],
     css:[
         '~/assets/css/style.css'
     ],

package.json

@@ -16,14 +16,16 @@
   },
   "dependencies": {
     "@heroicons/vue": "^2.0.13",
+    "@pinia/nuxt": "^0.4.6",
     "bootstrap": "^5.2.3",
+    "pinia": "^2.0.28",
+    "pinia-plugin-persistedstate": "^3.0.2",
     "vite": "^3.2.5",
     "vue": "^3.2.26",
     "vue-audio-visual": "^3.0.3",
     "vue-lottie": "^0.2.1",
     "vue-responsive-video-background-player": "^2.3.1",
     "vue3-circle-progress": "^1.0.7",
-    "vue3-lottie": "^2.4.0",
+    "vue3-lottie": "^2.4.0"
-    "vuex": "^4.0.2"
   }
 }

pages/onbording/index.vue

@@ -33,14 +33,14 @@
       </div>
     </div>
   </div>
-<!--<h1>{{ this.$store.state.counter }}</h1>-->
   <div class="row pt-5 mt-2 ">
     <div class="col-12 text-center pt-5 mt-3 doted-nav   pb-5 mb-2">
-      <NuxtLink @click="state12" class="btn btn-warning px-4 " to="/onbording"></NuxtLink>
+      <NuxtLink @click="" class="btn btn-warning px-4 " to="/onbording"></NuxtLink>
       <NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording2"></NuxtLink>
       <NuxtLink class="btn btn-warning px-2 " to="/onbording/onbording3"></NuxtLink>
       <NuxtLink class="btn btn-warning px-2 mx-2 " to="/onbording/onbording4"></NuxtLink>
       <h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
+      <button @click="increment()">Add +1 {{ count }}</button>
     </div>
 
   </div>
@@ -48,12 +48,13 @@
 </template>
 
 <script>
+import {useCounterStore} from '@/stores/counter';
+import {mapState,mapActions} from "pinia";
+// const counter=useCounterStore();
 export default {
+  computed:{...mapState(useCounterStore,['count'])},
   methods:{
-    state12(){
+    ...mapActions(useCounterStore,['increment'])
-      this.$store.commit('increment','200')
-      console.log()
-    }
   }
 }
 </script>

plugins/PiniaPlugin.ts

@@ -0,0 +1,4 @@
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+export default defineNuxtPlugin(({ $pinia }) => {
+    $pinia.use(piniaPluginPersistedstate)
+})

store/HeloWorld.js

@@ -1,8 +0,0 @@
-// export const state = () => ({
-//     counter: 0
-// })
-// export const mutations = {
-//     increment(state) {
-//         state.counter++
-//     }
-// }

store/mutations.js

@@ -1,5 +0,0 @@
-// export default{
-//     setCounter(state, payload){
-//         state.counter = payload
-//     }
-// }

store/state.js

@@ -1,3 +0,0 @@
-// export default () => ({
-//     counter: 0
-// })

stores/counter.js

@@ -0,0 +1,16 @@
+// stores/counter.js
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', {
+    state: () => {
+        return { count: 0 }
+    },
+    // could also be defined as
+    // state: () => ({ count: 0 })
+    actions: {
+        increment() {
+            this.count++
+        },
+    },
+    persist: true,
+})