vuex-persist | ( Fully Typescript | Storage library

I am trying to use vuex-persist on nuxt.js but when try to read the data in a v-if doesn't work.

I created a new file inside plugins called vuex-persis.js with the following code:

I am making an application in nuxt.js, I use a store to store data including the user who connects and I want to keep the user's connection elements in the localStorage. So to do this I used a plugin which is vuex-persist of which here is the code.

Here is my store/login.js :

I am working on project upgrade from Vue 2 to Vue 3. The code base changed according to Vue migration documents: https://v3.vuejs.org/guide/migration/introduction.html#overview. I have mismatch of above mentioned libraries. Does somebody has a running project and would share their working library versions

Current mismatch error is :

I'm using Pinia for state managment, and I want the state to persist when the page is refeshed.

I'm aware of two options:

1. Use a plugin. Vuex has a vuex-persistedstate plugin for this, and Pinia has a similar plugin but it's still under development.

2. Use local storage. Luckily Quasar has a LocalStorage plugin which would be nice to use here. But I'm not sure how to integrate it with Pinia, thus the reason for this post.

I found a nice tutorial doing something similar with Pinia + Vueuse.

And I tried adapting it to my needs with Pinia + TypeScript + Quasar LocalStorage Plugin as per below:

I am using vue and laravel in a project, I have sanctum configured in laravel, when I update the page the data is deleted I get an Unauthorized message. I tried to set vuex-persistedstate in the project, but it doesn't work, I was also trying to create an interceptor to read the token that is stored in the localStorage but nothing.

The problem is when I reload the page again, the requests it makes to the api seem to be lost and you have to log in again, Unauthenticated shows me

I am using vuex.

configuration .env:

to explain my problem, I will start by saying that I am currently making a system in Vue with backend API Laravel (irrelevant). I am making them as 2 separate projects. My problem is in the frontend Vue part. I created it using Vue CLI.

Here is my package.json file:

I am learning vue.js and trying to use vuex-persistedstate to save some states. I created a simple todo app and each one has a unique id.

I am iterating through all of them and create a vue instance like this:

I'm trying to pass a getter to my async action and it console logs just fine, but the await that calls an apollo mutation keeps seeing it as a null value whereas it just printed a real value to the console... I'm also using vuex-persisted-state to keep the store data alive. So the cartId state is not null by the time the action is performed... hence why it console logs the cartId value correctly.

state:

I want to switch from sessionStorage to localStorage if the user selects the "Remember Me" check box, also I using vuex-persistedstate