vuejs 存储 localStorage 设置对象答案

【问题标题】：vuejs store localStorage set objectvuejs 存储 localStorage 设置对象
【发布时间】：2022-01-18 19:00:16
【问题描述】：

我有一个主题配置存储，我在这个存储上设置了“localStorage”，我可以用同样的方式阅读它。但是我是一一记录的，是否可以将它们全部作为对象发送，如果可能，请举个例子。我如何在商店里设置它我是存储方面的小新手，请相应地发表评论。

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: {},
}

【问题讨论】：

github.com/championswimmer/vuex-persist
我喜欢不受包裹束缚的工作。我不想使用包
@Liza 动机是什么？您可以从以这种方式重新实现 Vue 开始。无论如何，vuex-persist 或 vuex-persistedstate 就是答案。如果您出于某种原因愿意重新发明轮子，请考虑检查他们的源代码
正如埃斯图斯所说。您可以选择直接使用该软件包还是阅读它的代码来学习如何自己做。并不复杂
这能回答你的问题吗？ How to Store Objects in HTML5 localStorage?

标签： vue.js local-storage

【解决方案1】：

您可以创建如下辅助函数：

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

然后像这样使用它：

footer: {
  type: getThemeConfig('footerType') || $themeConfig.layout.footer.type,
},
...
UPDATE_LAYOUT_TYPE(state, val) {
  updateThemeConfig('menuLayout', val); 
  state.layout.type = val
},

【讨论】：