How to persist Vue 3 store without Vuex?

Question

I'm using the vue 3 store to pass around values between components, in this case an image link.

store.js:

import {reactive} from "vue";

const re = reactive({})

export default {
    re
}

An image link is assigned in a component:

store.re.article = '../../images/1.jpg'

and recalled in another component:

<img :src="store.re.article">

Problem now is that the store is not persistent. When I refresh the page, the image does not get loaded because the link does not exist anymore. I could use localstorage/sessionstorage but was wondering if there is a more elegant way of achieving persistant store (like in vuex for example).

Answer 1

This tool existed, but it's not maintained anymore. https://github.com/robinvdvleuten/vuex-persistedstate

I think you'll be fine using Session or Localstorage.

Answer 2

for those who use pinia there is a very recent solution being worked on:

https://github.com/prazdevs/pinia-plugin-persistedstate