解决vuex中数据刷新消失的问题

最新推荐文章于 2024-01-23 13:44:48 发布

原创最新推荐文章于 2024-01-23 13:44:48 发布 · 5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vuex 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在Vue应用中结合使用Vuex和LocalStorage实现数据持久化的策略。通过在数据更新时同步保存到LocalStorage，确保了应用状态的持久保存。在应用启动时，检查LocalStorage中的数据并将其加载到Vuex store，避免了重复请求和数据丢失。

解决方法是在获取到数据往 store 中存储时，利用 window.localStorage.setItem(‘key’, value) 也存储一份相同数据。当在获取数据时判断存储的数据是否为空（如果是数组就判断长度是否为0，总之这儿就是判断），若不为空（数组长度不为0）直接获取，否则利用 window.localStorage.getItem(‘key’) 来获取。
例如

vue组件中：

      this.$store.commit('setUserId', item.id)
      window.localStorage.setItem('userId', JSON.stringify(item.id))

store中：

  getters: {
    loginIn: state => {
      let loginIn = state.loginIn
      if (!loginIn) {
        loginIn = JSON.parse(window.localStorage.getItem('loginIn') || null)
      }
      return loginIn
    },
}