关于vuex刷新页面数据丢失的问题

红太狼 2023-05-29 13:27 23阅读 0赞

**在讲vuex数据丢失的问题之前呢，先讲怎么写vuex  
1.需要配置（我这里由于需要的内容可能以后会用到，所以分开来写的）**  
在vue的src目录下创建一个store文件夹 里面有store.js、getters和modules文件夹  
modules文件夹下有app.js和user.js文件  
![在这里插入图片描述][20191106165654167.png]  
store.js在全局main.js里引入

import store from './store/store'

在store.js里写

import Vue from 'vue'
    import Vuex from 'vuex'
    import getters from './getters'
    import app from './modules/app'
    import user from './modules/user'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      modules: {
        app,
        user
      },
      getters
    })
    export default store

然后在user.js里写

import axios from 'axios'
    import '../../axios/index'
    import qs from 'qs'
    import Cookies from 'js-cookie'
    const user = {
      state: {
        kk: {},
        getJurisdiction: []
      },
      mutations: {
        // getJurisdiction
        SET_KK: (state, kk) => {
          state.kk = kk
        },
        //设置需要存到vuex里的数据
        SET_GETJURISDICTION: (state, getJurisdiction) => {
          state.getJurisdiction = getJurisdiction
        }
      },
      actions: {
        //   登录 在登录按钮函数里执行这个函数 （接口自己调整 kk是登录的时候传进来的参数）
        Login({
          commit
        }, kk) {
          return new Promise((resolve, reject) => {
            axios({
              method: 'post',
              url: '/auth/adminLogin',
              data: qs.stringify(kk),
              dataType: Object
            }).then(res => {
              Cookies.set('token', res.data.result)
              Cookies.set('userName', res.data.message)
              commit('SET_GETJURISDICTION', res.data.perms)
              //导出接口需要的数据
              resolve(res.data)
              //   console.log(res)
            }).catch(error => {
              reject(error)
            })
          })
        }
        // // 登出
        // LogOut({
        //   commit
        // }) {
        //   return new Promise(resolve => {
        //     removeToken()
        //     removeIsLogin()
        //     removeUserInfo()
        //     // localStorage.removeItem('groupList')
        //     resolve()
        //   })
        // }
      // }
      }
    }
    
    export default user

在getters.js里写 分开写是为了方便管理和编写

const getters = {
      //就是为了使用的时候取出来
      getJurisdiction: state => state.user.getJurisdiction,
      kk: state => state.user.kk
    }
    export default getters

在登录的时候这么写this.$store.dispatch(‘要调用的函数’, 要传的参数)

this.$store.dispatch('Login', this.kk).then(r => {
              //登录存储权限防止刷新丢失数据
              //this.getJurisdiction = r
              //window.localStorage.setItem("getJurisdiction",JSON.stringify(this.getJurisdiction));
             if(r.code=="200"){
                  this.$router.push('/platform')
              }else{
                  this.loginShow = true;
              }
            }).catch(r => {
              // this.$router.push({ path: '/' })
              this.loginShow = true;
            })

**然后这个时候已经存储在运行内存中了也就是vuex里了，但是，这个时候回有一个问题，就是刷新页面的时候 数据丢失， 我这里的解决办法是**  
在APP.vue的created()生命周期里这么写

//在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem("getJurisdiction")) {
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("getJurisdiction"))))
        } 
    
        //在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener("beforeunload",()=>{
            sessionStorage.setItem("getJurisdiction",JSON.stringify(this.$store.state))
        })

最后 别忘了退出登录的时候清除sessionStorage里存的值 以防值会覆盖出错

[20191106165654167.png]: https://img-blog.csdnimg.cn/20191106165654167.png