浏览器刷新后vuex中的状态消失如何解决？

浏览器刷新之后保存在vuex中的状态消失怎么回事？

这是因为js是运行在浏览器内存中的，当浏览器刷新时，浏览器内存被释放，因此保存在vuex中的数据会丢失。

解决思路

既然js是在内存中运行的，那么考虑将不想丢失的数据放在一个不会因内存释放而丢失的地方--本地存储。

常用本地存储有localStorage和sessionStorage，这里顺便区分一下二者的区别。

1.sessionStorage是会话级的存储，其存在周期仅在统一浏览器窗口，并且在浏览器保持打开的时候才存在，当关闭浏览器时sessionStorage将消失，因此sessionStorage不是永久型本地存储。

2.localStorgae是永久型本地存储，一旦将数据存到localStorage中，除非手动删除，否则其将一直存在。

了解了以上两种本地存储的区别之后，我想大家应该猜到需要如何处理来持久性保存数据了--vuex + localStorage。

举个栗子：

 

// <html>
<div @click="update">点击更新<div>

// script
export default {
  data() {
    status: ''
  },
  mounted() {
    this.$store.dispatch('updateStatus');
  },
  methods: {
    update() {
      this.$store.commit('setStatus',this.status);
    }
  }
}

// vuex中
state: {
  status: ''
},
mutations: {
  setStatus(state,status) {
    state.status = status;
    window.localStorage.activeStatus = JSON.stringify(status);
  },
  selectStatus(state, status) {
    state.status = status;
  }
},
actions: {
  updateStatus({
    commit,
    state
  }) {
    let status = JSON.parse(window.localStorage.activeStatus);
    commit('selectStatus', status);
  }
}

此例在触发点击事件时，进行提交mutations中的setStatus操作，将状态保存到state中，并存储状态至本地存储。每当页面挂载的时候触发actions的updateStatus操作，获取本地存储localStorage中的状态，并提交mutations中的selectStatus操作更新状态至state中，以达到状态持久化的处理。

posted @ 2022-03-16 16:31  给我一个debug  阅读(337)  评论(0)    收藏  举报