Nuxt•2y ago

Pinia, Local Storage ... :(

Hey, So I created a store to save a cart Id, its wordking great! exepect when I refresh the page... the store gets reset. So I then started using local storage to store the ID then fetch it back like below:

import { defineStore } from 'pinia';
import nuxtStorage from 'nuxt-storage';

// You can name the return value of `defineStore()` anything you want,
// but it's best to use the name of the store and surround it with `use`
// and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
// the first argument is a unique id of the store across your application
export const useCartStore = defineStore('cart', {
    state: () => ({
        id: nuxtStorage.localStorage.getData('cartId') || null,
    }),
});

import { defineStore } from 'pinia';
import nuxtStorage from 'nuxt-storage';

// You can name the return value of `defineStore()` anything you want,
// but it's best to use the name of the store and surround it with `use`
// and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
// the first argument is a unique id of the store across your application
export const useCartStore = defineStore('cart', {
    state: () => ({
        id: nuxtStorage.localStorage.getData('cartId') || null,
    }),
});

its still working when going between pages, local storage is getting updated but when I refresh the page all I get is null 😦

11 Replies

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

Yes same issue

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

yeah I seen this and tried

watch(
    () => store.id,
    (newId) => {
        localStorage.setItem('cartId', JSON.stringify(newId));
    },
    { deep: true }
);

watch(
    () => store.id,
    (newId) => {
        localStorage.setItem('cartId', JSON.stringify(newId));
    },
    { deep: true }
);

problem is its setting to local storage but I cant get it I think the issue is here to get the local storage data

import { defineStore } from 'pinia';
import nuxtStorage from 'nuxt-storage';

// You can name the return value of `defineStore()` anything you want,
// but it's best to use the name of the store and surround it with `use`
// and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
// the first argument is a unique id of the store across your application
export const useCartStore = defineStore('cart', {
    state: () => ({
        id: nuxtStorage.localStorage.getData('cartId') || null,
    }),
});

import { defineStore } from 'pinia';
import nuxtStorage from 'nuxt-storage';

// You can name the return value of `defineStore()` anything you want,
// but it's best to use the name of the store and surround it with `use`
// and `Store` (e.g. `useUserStore`, `useCartStore`, `useProductStore`)
// the first argument is a unique id of the store across your application
export const useCartStore = defineStore('cart', {
    state: () => ({
        id: nuxtStorage.localStorage.getData('cartId') || null,
    }),
});

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

here?

watch(
    () => store.id,
    (newId) => {
        localStorage.setItem('cartId', JSON.stringify(newId));
    },
    { deep: true }
);

watch(
    () => store.id,
    (newId) => {
        localStorage.setItem('cartId', JSON.stringify(newId));
    },
    { deep: true }
);

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

sorry I don't know what that means lol

Unknown User•2y ago

Message Not Public

RomiOP•2y ago

export const useCartStore = defineStore('cart', {
    state: () => ({
        id: nuxtStorage.localStorage.getData('cartId') || 'helo',
    }),
    getters: {
        cartId: () => nuxtStorage.localStorage.getData('cartId'),
    },
    actions: {
        setCartId(id) {
            this.id = id;
            nuxtStorage.localStorage.setData('cartId', id);
        },
    },
});

export const useCartStore = defineStore('cart', {
    state: () => ({
        id: nuxtStorage.localStorage.getData('cartId') || 'helo',
    }),
    getters: {
        cartId: () => nuxtStorage.localStorage.getData('cartId'),
    },
    actions: {
        setCartId(id) {
            this.id = id;
            nuxtStorage.localStorage.setData('cartId', id);
        },
    },
});

` just nuxt wont read from my local storage but it will write to it 😦

Unknown User•2y ago

Message Not Public

Gaming

Programming

Pinia, Local Storage ... :(