问题描述

在做一个vue单页面项目是，我们通常会将公有数据存储在vuex里，但在页面刷新的时候，vuex里state的数据会重置，所以我们采用的方法通常是先将数据放到 localstorage 或 sessionstorage 里，当页面刷新后，在beforeCreate生命周期里重新赋值，问题来了，localstorage 或 sessionstorage的值是可以改变的，当页面刷新后，它改变的值会赋到vuex里，这是个安全问题

问题解决

我们可以在主页面（像home.vue,）的mounted里写上这样一行代码

home.vue

data（）{
	return {
		//获取vuex里的值
		user: this.$store.state.user
	}
},
beforeCreate() {
	// 页面刷新后赋给vuex值
    this.$store.commit(
      "newUser",
      JSON.parse(window.localStorage.getItem("user"))
    );
  },
mounted() {
// user为要储存的数据
    window.onbeforeunload = () => {
      window.localStorage.removeItem("user");
      window.localStorage.setItem("user", JSON.stringify(this.user));
      return;
    };
  },

vuex

随意写的demo，官方不推荐这种写法

state: {
    user: JSON.parse(window.localStorage.getItem("user")),
 },
 mutations: {
    newUser(state, users) {
      state.user = users;
    }
 }

好了，这样用户改了localstorage 或 sessionstorage的值也没用了，每次页面刷新前，localstorage 或 sessionstorage的值都会被重新赋值成vuex里的值，而vuex里的值，又无法直接改变。

如果您有更好的方法，欢迎评论，让我们一起进步