vuejs store localStorage set object - vue.js

Question

I have a theme config store, and I set "localStorage" on this store, I can read it the same way. but I'm recording them one by one, is it possible to send them all as objects instead, if possible, please give an example.
how do i set it on the store
I'm a little newbie in storage, please comment accordingly.
export const $themeConfig = {
app: {
appName: 'Name',
appLogoImage: '',
},
layout: {
skin: 'light',
type: 'vertical',
contentWidth: 'full',
menu: {
hidden: false,
isCollapsed: false,
},
navbar: {
type: 'floating',
backgroundColor: 'dark',
},
footer: {
type: 'static',
},
customizer: true,
},
}
import {$themeConfig} from '../../themeConfig'
export default {
namespaced: true,
state: {
layout: {
skin: localStorage.getItem('themeConfig-skin') || $themeConfig.layout.skin,
type: localStorage.getItem('themeConfig-menuLayout') || $themeConfig.layout.type,
contentWidth: localStorage.getItem('themeConfig-contentWidth') || $themeConfig.layout.contentWidth,
menu: {
hidden: localStorage.getItem('themeConfig-menuHidden') || $themeConfig.layout.menu.hidden,
},
navbar: {
type: localStorage.getItem('themeConfig-navbarType') || $themeConfig.layout.navbar.type,
backgroundColor: localStorage.getItem('themeConfig-navbarBG') || $themeConfig.layout.navbar.backgroundColor,
},
footer: {
type: localStorage.getItem('themeConfig-footerType') || $themeConfig.layout.footer.type,
},
},
},
getters: {},
mutations: {
UPDATE_SKIN(state, skin) {
state.layout.skin = skin
localStorage.setItem('themeConfig-skin', skin)
if (skin === 'dark') document.body.classList.add('dark-layout')
else if (document.body.className.match('dark-layout')) document.body.classList.remove('dark-layout')
},
UPDATE_LAYOUT_TYPE(state, val) {
localStorage.setItem('themeConfig-menuLayout', val)
state.layout.type = val
},
UPDATE_CONTENT_WIDTH(state, val) {
localStorage.setItem('themeConfig-contentWidth', val)
state.layout.contentWidth = val
},
UPDATE_NAV_MENU_HIDDEN(state, val) {
localStorage.setItem('themeConfig-menuHidden', val)
state.layout.menu.hidden = val
},
UPDATE_NAVBAR_CONFIG(state, obj) {
if (obj.backgroundColor)
localStorage.setItem('themeConfig-navbarBG', obj.backgroundColor)
else
localStorage.setItem('themeConfig-navbarType', obj.type)
Object.assign(state.layout.navbar, obj)
},
UPDATE_FOOTER_CONFIG(state, obj) {
if (obj.type)
localStorage.setItem('themeConfig-footerType', obj.type)
else
localStorage.setItem('themeConfig-footerType', obj.type)
Object.assign(state.layout.footer, obj)
},
},
actions: {},
}

Answer 1

You can create helper functions like:
function updateThemeConfig (key, data) {
let state = localStorage.getItem('themeConfig');
if(state){
state = JSON.parse(state);
state[key] = data;
} else {
state = {
[key]: data;
}
}
localStorage.setItem('themeConfig', JSON.stringify(state))
}
function getThemeConfig (key) {
let state = localStorage.getItem('themeConfig');
if(state) {
state = JSON.parse(state);
return state[key];
}
return;
}
Then use it like this:
footer: {
type: getThemeConfig('footerType') || $themeConfig.layout.footer.type,
},
...
UPDATE_LAYOUT_TYPE(state, val) {
updateThemeConfig('menuLayout', val);
state.layout.type = val
},