vuex状态管理 -- store刷新后数据会重置的解决方法

初用vuex，通过store存储一些共享数据，但是刷新后数据就清空了，所以需要使用本地存储来保存下来。

1.state从localStorage中获取

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


export const store = new Vuex.Store({
    // store刷新后数据会重载 所以用localStorage保存在本地
    state:localStorage.getItem("state") ? JSON.parse(localStorage.getItem("state")):{  
        userList:[],  // 数据列表
    },
    mutations:{
        saveUserList(state,data){ 
            // data为index请求传过来的数据 赋给staet里中的userList的
            state.userList = data; 
        }
    }
})

2.在APP.vue中添加以下代码

 mounted() {
      window.addEventListener('unload',this.saveState)
  },
  methods: {
    saveState(){
      localStorage.setItem("state",JSON.stringify(this.$store.state))
    }
  },

也就是说监听unload方法，如果重载页面就把state存入
sessionStorage，然后在需要state的时候从sessionStorage中取值。

 

转载于:https://www.cnblogs.com/hs610/p/10636275.html