解决页面刷新vuex中数据丢失问题

解决页面刷新vuex中数据丢失问题

遇到的问题：

当我们在后台获取到用户信息之后把用户的用户名显示到页面，首次显示是没有问题的， 当我们页面刷新的时候vuex里面获取到的用户名数据就会丢失了。

解决方法（方法1）

主要思路：在我们点击登录的时候把后台返回用户的数据拿到，放进本地的缓存里面，当我们页面刷新的时候在去本地缓存里面取出数据，在进行渲染

主要的代码：

//这是在我们主页面或者实在组件里面
//当页面加载的时候执行这个代码
  created () {
    //这一行代码的意思就是调用vuex里面的store里面user里面的obtain方法
    this.$store.dispatch('user/obtain')
  },
  
  //vuex里面store里面的user
  //obtain 获取本地存储的内容
  obtain (context) {
    context.commit('obtainName')
      //调用上面的obtainName的方法
  }
//在state里面定义一个空的对象
 obtainName (state) {
     //这里是给state里面定义的键obtainName赋值，获取本地的值放进obtainName里面
    state.obtainname = JSON.parse(localStorage.userinfo)
  }

//这个时候我们的主页面就可以使用state里面的这个键了

总结：这个方法比较绕，主线比较清晰，就是本地存储和本地获取

解决方法2（‘比较优雅，推荐’）

使用vuex状态持久化插件vuex-persistedstate

安装起步

npm install vuex-persistedstate

配置使用

在store文件的 index.js 文件中使用

// 引入vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'

// ...

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState(
    // 配置将vuex的状态储存到sessionStorage中（默认储存到localStorage中）
    { storage: window.sessionStorage }
  )]
})