一种解决VUEX数据不能长时间存储的方法

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情”

简单说明一下VUEX的功能

Vuex 是用于 Vue.js 应用程序的状态管理模式 + 库。它充当应用程序中所有组件的集中存储，并通过规则确保状态只能以可预测的方式发生变化。

缺陷

vuex的内容值是储存在内存条里的，只能作为一个临时数据，无法持久化（当你不想重复或无法多次请求获取数据时，例：登录信息）
请求成功后返回的数据

每次刷新页面，之前的数据都会丢失
刷新后数据为空

解决的办法

使用本都存储localStorage

//在获取到登录信息后
//我们使用localstorage将登录信息存储在本地做持续化储存
//在存储之前我们需要准换成JSON格式
localStorage.setItem('user',JSON.stringify(state.user))

之后我们需要数据的时候就可以在localstorage里面拉出来使用.

export default {
        data() {
            return {
                // 创建一个存储user的对象
                user:{},

            }
        
        },
    created(){
         // 当页面渲染完成时，获取localstorage里面的user并赋值给data的user
         this.user = JSON.parse(localStorage.getItem('user'))
         console.log(this.user,'this.user');
    }

刷新一下，看一下是否获取到了

成功

如果不想明文存储，可以在存储过程中进行加密，读取时再解密。