不是第一

解决浏览器刷新后 Vuex 数据消失问题

1、 解决浏览器刷新后 Vuex 数据消失问题
2、解决思路：
办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）

办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据

办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）


分析：
办法一的缺点是不安全，不适用大数据量的存储；

办法二适用于少量的数据，并且不会出现网络延迟；

办法三是办法二和办法一配合使用。


3、解决过程：
3.1、选择合适的浏览器存储
localStorage -- 是永久存储在本地，除非你主动去删除;

sessionStorage -- 是存储到当前页面关闭为止，和其他tab页没关联;

cookie -- 则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取，会和后台进行交互。


本方法选择的是sessionStorage，选择的原因是由于vue是单页面应用，操作都是在一个页面跳转路由，另一个原因是sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。


3.2、解决方案
由于state里的数据是响应式，所以sessionStorage存储也要跟随变化，而且只能通过mutations来改变state中的值。首先在用户登录成功之后，然后把用户信息，菜单信息通过actions分发保存至vuex中。然后在菜单页面计算vuex中state的菜单数据，将数据解析组装成前端组件所需的格式，然后渲染组件，生成菜单树。如果页面没有刷新，则一切正常。

vuex页面F5刷新后维持刷新前的状态不变

  • 对于在当前访问网页使用F5刷新之后，页面的变量和参数都会丢失，这时页面显示的内容会变得不友好，用户体验不好，
  • 我们可以通过将页面的参数和变量保存到sessionStorage中，当刷新后再从sessionStorage将变量和状态取回来渲染回页面
  • 那样F5刷新后，用户看到的页面还是刷新前的。
  • 首先在store的index.js中，state，增加页面要保存的变量，并且将它们的值和sessionStorage里面的绑定
  • 然后再新增mutations，这是将变量写入sessionStorage的方法
  • 接着就可以在登录函数中这样调用，登录成功后将需要的变量写进sessionStorage
  • 在路由的钩子函数里面可以这样将变量取回来，那样页面刷新后，也能将刷新前的状态保持
  • sessionStorage.getItem('tiktok')
export default new Vuex.Store({
  state: {
    token:sessionStorage.getItem('tiktok')
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      sessionStorage.setItem('tiktok',token)
    },
  },
  actions: {
    asynToken({commit},tik){
        commit('setToken',tik)
    }
  },
  modules: {
  }
})

mapState的使用（常用）


 
//1.在.vue组件中引入,在js块中引入

import { mapState } from 'vuex'
//2.在.vue组件中定义一个对象

computed：{
...mapState([        //mapState本是一个函数，在里面写一个数组，记得加...
‘num’ ， //存的数据
‘id’
])
}
//3.然后就可以不用$store.state.num引用了,直接插值

{{num}}{{id}}   //引用多个
 
 
//4. 解构赋值实例
let mapState = {num:0,id:111}
let computed = {...mapState}
console.log(computed )