How to keep items in cart even after refresh using vuex - vue.js

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

Why do you expect it to persist data? You aren't using any kind of database to store the data.

Answer 2

Use the vuex plugin vuex-persist. You can use it to persist data to localstorage or cookies while using everything awesome bout vuex

Answer 3

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
};