Vuex刷新页面数据丢失

Vuex刷新页面数据丢失

解决办法：

组件二这个页面是读取state中的数据，所有必须先将数据保存在state中，组件一是点击后传参给state，然后跳转到组件二页面

1. 使用sessionStorage

//main.js中的代码
const store = new Vuex.Store({
  state: {
    blogDetail: {},
  },
  mutations: {
    //给state中的参数赋值
    setBlog(state, blog) {
      state.blogDetail = blog;
    }
  },
  getters: {
    //组件二中取值使用此方法
    getBlogDetail: (state) => {
      return state.blogDetail;
    }
  }
})

//组件一
//使用commit传参，将参数保存在state中
this.$store.commit('setBlog',blog);

//组件二
//在需要的参数的页面使用created函数，当sessionStorage存在值的时候通过commit给state重新赋值
created() {
  if (sessionStorage.getItem("store")!=null) {
    this.blogDetail=JSON.parse(sessionStorage.getItem("store"));
    this.$store.commit("setBlog",this.blogDetail);
  }
},

//App.vue页面
//开始想在这里给state中的参数重新赋值，结果不行，所有这里监听页面刷新事件，页面刷新时将sessionStorage保存
created() {
  window.addEventListener("unload",()=>{
    sessionStorage.setItem("store",JSON.stringify(this.$store.state.blogDetail));
  })
}

另外，sessionStorage会自动覆盖的，所有这里没有用其他的方法，直接setItem.

2. 使用localStorage
   参考sessionStorage
3. 安装插件vuex-persistedstate
   1. npm install vuex-persistedstate --save
   2. main.js中导入, import xxx from 'vuex-persistedstate'

const store = new Vuex.Store({
  plugins:["xxx"]
  state: {
    blogDetail: {},
  },
  mutations: {
    setBlog(state, blog) {
      state.blogDetail = blog;
    }
  },
  getters: {
    getBlogDetail: (state) => {
      return state.blogDetail;
    }
  }
})

使用这个插件可以自动保存到Storage，具体是session还是local需要自己配置，原理也是上面那些，具体配置可以去看看文档