页面刷新vuex中数据丢失解决办法

Posted 2021-05-14 david_远

当我们在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