How to keep items in cart even after refresh using vuex

Question

The problems i am facing are -

• My state become empty when I refresh the page
• same occurs when i logout and then login

I am new to vuex and I want to build a functioning cart for my e-commerce site.

My cart store is as follows (ps. I have only made a very simple outline to check if it is working as desired):

let dayCare = window.localStorage.getItem('dayCare');

const state = { 
    dayCare: dayCare ? JSON.parse(dayCare) : [],
    
};

const getters = { 
    dayCareItems (state){
        return state.dayCare
    }

};

const actions = { 
    dayCareCart({commit}, dayCare){
        let data = dayCare
        commit('pushDaycareToCart', data)
        return data
        commit('saveCart')
    },
    
};

const mutations = {
    pushDaycareToCart(state, data){
        return state.dayCare.push(data)
        
    },
    saveCart(state) {
        window.localStorage.setItem('dayCare', JSON.stringify(state.dayCare));
        
    }
};


export default {
    state,
    actions,
    mutations,
    getters
};

the data for my cart comes from :

<button type="submit"  @click="dayCareCart(cartData)">Add To Cart</button>

<script>
import {mapGetters, mapActions} from 'vuex'
export default {
  methods: {
   ...mapActions(["dayCareCart"]),
  }
}
</script>

I want to know what i should add to retain the data for the logged in user

Answer 1

I figured out how to persist the cart. The save mutation should be called in the push to cart mutation

let dayCare = window.localStorage.getItem('dayCare');

const state = {
    dayCare:  dayCare ? JSON.parse(dayCare) :[],
};
const getters = { 
    dayCareItems (state){
        return state.dayCare
    }
};
const actions = {
    dayCareCart({commit}, dayCare){
        commit('pushDaycareToCart', dayCare)
    },
};
const mutations = {
    pushDaycareToCart(state, dayCare){      
        state.dayCare.push(dayCare)
        this.commit('saveCart') 
    },
    saveCart(state) {
        window.localStorage.setItem('dayCare', JSON.stringify(state.dayCare));
    },
};
export default {
    state,
    actions,
    mutations,
    getters
};