vuex中提交mutations的时候保存到localstorage，想在刷新时从state新获取localstorage。

Question

代码如下：

Vue.use(Vuex)
const localLoginData = global.localStorage;
const store = new Vuex.Store({
  state: {
    logindata:JSON.parse(localStorage.getItem('logindata')),    // 初始化vuex，刷新时获取localstorage
    form1: {}  //登录信息
  },
  getters:{
    getUserInfo:(state)=>state.logindata==null?'':state.logindata,
  },
  mutations: {
    updatelogindata(state, logindata) {
      state.logindata = logindata;
      localStorage.setItem('logindata',JSON.stringify(logindata));// 提交mutation成功后保存logindata到localStorage
    },
    updatamessage(state, form1) {
      state.form1 = form1
    }
    
  },

为什么一刷新还是state还是清空了，明明已经保存成功到了localstorage里了啊，试过很多方法了，难道vuex不能实现持久化缓存么？

Answer 1

看到这个问题我也想不通，然后我按你的思路试了一下，能很好的工作，所以在vuex的mutation里将数据保存到localstorage应该是没有问题的，你还得仔细查一下代码是不是哪个地方写的有问题。

Answer 2

1. 登录信息也保存一下，在 state.form1 = form1 后面；
2. const localLoginData = global.localStorage 这句可以不用。

Answer 3

这个应该可以结局你的问题
链接描述

Answer 4

你可以通过actions来获取logindata的值

 mutations: {
   getUsers(state, e){
      state.logindata = e;
      
    },
 },
 actions: { 
    getUser ({ commit }) {
      let logindata = JSON.parse(localStorage.getItem('logindata'));
      commit('getUsers',logindata );
    }
  },


this.$store.dispatch('getUser');

这样state就有值了。

Answer 5

我写的一个 小工具 https://github.com/qinouz/vue... 能解决你的问题

Answer 6

可以了解下 vuex-persistedstate