I am in the process of developing a basic shopping cart and I need guidance on how to persist an array containing cart data when executing the addProduct mutation below. Is there a way to save this data temporarily to prevent it from being lost due to browser refreshing? I have heard about vuex-persistedstate, but how can I implement it in this particular scenario?
import Vue from 'vue';
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
Vue.use(Vuex);
export const store = new Vuex.Store({
plugins: [
createPersistedState({
getState: state.cartdata;
setState: state.cartdata;
})
]
state: {
cartdata: []
},
mutations: {
deleteProduct: function(state, product){
state.cartdata.splice(state.cartdata.indexOf(product), 1);
},
addProduct: function(product){
this.$store.state.cartdata.push({
id: product.id,
name: product.name,
price: product.price,
quant: 1
})
}
},