vuex数据刷新后丢失问题解决办法

Dear 丶 2023-06-27 04:30 26阅读 0赞

在实际的vue项目中，当我们的应用遇到多个组件之间的共享问题时，通常会用到Vuex（一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化），解决组件之间同一状态的共享问题。

因子：

*  Vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
 *  Vuex劣势：在刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

**言而总之：\***\* \*\*

实际问题：在vue项目中，使用Vuex做状态管理时，调试页面时，刷新后state上的数据消失了，该如何解决？

解决思路：将state中的数据放在浏览器sessionStorage和localStorage和vuex 扩展插件

store下面的index.js文件

import Vue from 'vue'
    import Vuex from 'vuex'
    //1.安装插件
    Vue.use(Vuex)
    //2.创建对象
    //根 只能根进行new Vuex.Store
    const store =new Vuex.Store({
      state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')):{
        userInfo:{}//用户信息
      },
      mutations:{
        login(state,payload) {
          console.log(payload)
          state.userInfo = payload
        }
      },
      actions:{ //进行异步的操作，类似于mutations，也可以传递参数，state变成了context上下文
      },
      getters:{
      },
      modules:{
      },
    })
    
    //导出store对象共享
    export default store

在登陆页面的方法里面赋值

login() {
            this.$refs.loginFormRef.validate(async valid=>{
              //先验证
              if(!valid) return;
              //返回值是 promise用 await 和async 异步
              //解构
              let params= { username:this.loginForm.username,
                password:this.loginForm.password}
              console.log(this.loginForm.username)
              const {data:res} =await this.$http.post("/hr/doFindHrByUsername",this.$qs.stringify(params)
               );
             if(res.state !==1) return this.$message.error('登录失败，用户名或密码错误')
              this.$message.success('登录成功'+res)
              this.$store.commit('login',res.data)
              //console.log(this.$store.state.userInfo)
              // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
              //   1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
              //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
              console.log(res)
              //window.sessionStorage.setItem("token",res.data.token);
              //2.通过编程式导航跳到后台主页,路由地址是 /home
              this.$router.push("/home")
            });
          }

home页面里面存储

<span >{
       {this.$store.state.userInfo.username}}</span>
    
      
    mounted(){
          window.addEventListener('unload', this.saveState)
        },
        methods:{
          saveState() {
            sessionStorage.setItem('state', JSON.stringify(this.$store.state))
          },
          logout() {
           
            window.sessionStorage.clear();
            this.$router.push('/login');
          },