Persist state on refresh

package.json

@@ -21,6 +21,7 @@
     "lodash": "^4.17.19",
     "mdi-vue": "^3.0.13",
     "pinia": "^2.1.3",
+    "pinia-plugin-persistedstate": "^3.1.0",
     "sass": "^1.62.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2"

src/components/item_card/BundleButton.vue

@@ -15,7 +15,7 @@ const props = defineProps<Props>()
 const bundle = store.getBundleById(props.bundleItem.bundle_id)
 
 const itemInBundle = computed(() => store.isBundleItemStored(props.bundleItem.id))
-console.log(itemInBundle)
+
 const buttonClass = computed(() => {
   if (itemInBundle.value) {
     return 'is-success'
@@ -30,7 +30,6 @@ const numberInBundle = computed(() => {
 })
 
 function toggleItemInBundle() {
-  console.log(itemInBundle.value)
   if (!itemInBundle.value) {
     store.storeItem(props.bundleItem.id)
   } else {

src/main.ts

@@ -1,12 +1,13 @@
-import '../node_modules/bulma/bulma.sass'
-
-import { createApp } from 'vue'
+import * as mdijs from '@mdi/js'
+import mdiVue from 'mdi-vue/v3'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
+import { createApp } from 'vue'
 
 import App from './App.vue'
 import router from './router'
-import mdiVue from 'mdi-vue/v3'
-import * as mdijs from '@mdi/js'
+
+import '../node_modules/bulma/bulma.sass'
 
 const app = createApp(App)
 
@@ -16,6 +17,7 @@ app.use(mdiVue, {
 })
 
 const pinia = createPinia()
+pinia.use(piniaPluginPersistedState)
 app.use(pinia)
 
 app.mount('#app')

src/store/index.ts

@@ -43,6 +43,7 @@ export const useGeneralStore = defineStore('general', {
     skills,
     rooms
   }),
+  persist: true,
   getters: {
     getItemById:
       (state) =>

src/views/BundlesView.vue

@@ -3,7 +3,8 @@ import BundleNav from '@/components/bundles/BundleNav.vue'
 import router from '@/router'
 import { useGeneralStore } from '@/store'
 
-const bundle = useGeneralStore().getBundleById(Number(router.currentRoute.value.params.id))
+const store = useGeneralStore()
+const bundle = store.getBundleById(Number(router.currentRoute.value.params.id))
 </script>
 
 <template>

yarn.lock

@@ -1731,6 +1731,11 @@ pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
+pinia-plugin-persistedstate@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.1.0.tgz#eada2b61ecd478fce88e490a685210415cd7a1b4"
+  integrity sha512-8UN+vYMEPBdgNLwceY08mi5olI0wkYaEb8b6hD6xW7SnBRuPydWHlEhZvUWgNb/ibuf4PvufpvtS+dmhYjJQOw==
+
 pinia@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.3.tgz#50c70c7b4c94c109fade0ed4122231cbba72f8c5"