5分钟教你解决页面刷新vuex中数据丢失

我就是我 2023-01-18 12:19 6阅读 0赞

当我们在vue项目中使用vuex来做全局的状态管理时，我们会发现页面刷新以后，保存在vuex实例store里的数据会丢失

vuex中store中的数据有一个特性，在页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值，所以这就是导致vuex中数据丢失的原因

--------------------

最简单的方法就是我们利用js存储技术(localStorage、sessionStorage、cookie)来进行数据的相应储存

不过这种js存储技术也是有机效的

*  localStorage：  
    localStorage的生命周期是长时间存在的，关闭页面或浏览器之后localStorage中的数据也不会自动删除。除非主动删除localStorage中储存的数据，否则数据永远不会消失
 *  sessionStorage：  
    sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的  
    \-cookie：  
    cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取

vue是一个单页面应用，操作都是在一个页面进行路由跳转 所以sessionStorage是最为合适的一种

*  sessionStorage可以保证页面在打开时的sessionStorage数据为空值
 *  在每次打开页面的时候localStorage会存储着上一次的页面数据，因此还要去做清空

sessionStorage的所有使用方法：  
1、sessionStorage.setItem(“key”, “value”); //储存  
2、sessionStorage.getItem(“key”); //取值  
3、sessionStorage.removeItem(“key”); //删除单个  
4、sessionStorage.clear(); // 删除所有

虽然sessionStorage最为合适，但为了考虑用户体验建议使用localStorage

localStorage的所有使用方法：  
1、localStorage.setItem(“key”, “value”); //储存  
2、localStorage.getItem(“key”); //取值  
3、localStorage.removeItem(“key”); //删除单个  
4、localStorage.clear(); // 删除所有

--------------------

使用vuex-persistedstate 插件

运行npm命令进行安装：  
`npm install vuex-persistedstate -S`  
然后我们需要在store文件夹下的index.js中进行引入

import persistedstate from "vuex-persistedstate"
    const store = new Vuex.Store({ 
     plugins: [persistedstate ()]
    })

默认持久化所有state数据↑↑↑↑↑↑↑↑

指定需要持久化的state数据↓↓↓↓↓↓↓↓↓

import persistedstate from "vuex-persistedstate"
    const store = new Vuex.Store({ 
      plugins: [persistedstate({ 
        storage: window.sessionStorage,
        reducer (data) { 
          return { 
            // 设置只储存state中的myData
            myData: data.myData
          }
        }
      })]

--------------------

/* module.js */
    export const dataStore = { 
      state: { 
        data: []
      }
    }
    
    /* store.js */
    import {  dataStore } from './module'
    
    const dataState = createPersistedState({ 
      paths: ['data']
    })
    
    export new Vuex.Store({ 
      modules: { 
        dataStore
      },
      plugins: [dataState]
    })

更多关于vuex-persistedstate的参考文档  
https://www.npmjs.com/package/vuex-persistedstate