办理Vuex刷新页面数据丢失的问题

一：数据丢失的缘故起因

   

• vuex存储的数据只是在页面中，相称于全局变量，页面刷新的时间vuex里的数据会重新初始化，导致数据丢失。
  
• 由于vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex内里的数据就会被重新赋值。
  

  二：办理的思路

   

• 将vuex中的数据直接保存到欣赏器缓存中（sessionStorage、localStorage、cookie）
  
• 页面刷新后再从欣赏器中取出
  

  三：办理方法

方法一：

• 直接在vuex修改数据方法中将数据存储到欣赏器本地存储中
  

1. import Vue from 'vue';
2. import Vuex from 'vuex';
4. Vue.use(Vuex);
6. export default new Vuex.Store（{
7.     state: {
8.        orderList: [],
9.        menuList: []
10.    },
11.     mutations: {
12.         orderList(s, d) {
13.           s.orderList= d;
14.           window.localStorage.setItem("list",jsON.stringify(s.orderList))
15.         },  
16.         menuList(s, d) {
17.           s.menuList = d;
18.           window.localStorage.setItem("list",jsON.stringify(s.menuList))
19.        },
20.    }
21. }）

复制代码

• 在页面加载时再从本地存储中取出并赋给vuex
  

1. if (window.localStorage.getItem("list") ) {
2.         this.$store.replaceState(Object.assign({},
3.         this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
4. }

复制代码

在此可以举行优化

• 通过监听beforeunload事故来举行数据的localStorage存储，beforeunload事故在页面刷新时举行触发，具体做法是在App.vue的created()周期函数中下如下代码：
  

1. if (window.localStorage.getItem("list") ) {
2.     this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
3. }
5. window.addEventListener("beforeunload",()=>{
6.     window.localStorage.setItem("list",JSON.stringify(this.$store.state))
7. })

复制代码

方法二：

• 使用第三方库举行持久化存储
  

• 安装 vuex-persistedstate
  

   npm install --save vuex-persistedstate
  

• 在store文件夹下的indedx.js中设置信息
  

• 使用vuex-persistedstate默认存储到localStorage
  

1. import createPersistedState from "vuex-persistedstate"
2. const store =newVuex.Store({
3. 　　state: {
4. 　　　　count: 1
5. 　　},
6. 　　mutations: {},
7. 　　actions: {},
8. 　　// 当state中的值发生改变，此时localStorage中的vuex的值会同步把state中的所有值存储起来，当页面刷
9. 　　　新的时候，state的值会从localStorage自动获取vuex的value值，赋值到state中
10. 　　plugins: [createPersistedState()]
11. })

复制代码

• 使用vuex-persistedstate存储到sessionStorage
  

1. import createPersistedState from "vuex-persistedstate"
2. const store = new Vuex.Store({
3.    state: {},
4.    mutations: {},
5.    actions: {},
6.    plugins: [createPersistedState({
7.        storage:window.sessionStorage  // 同localStorage相同，只是将vuex的所有值存储到sessionStorage中
8.    })]
9. })

复制代码

• 使用vuex-persistedstate指定必要持久化的state
  

1. import createPersistedState from "vuex-persistedstate"
3. const store = newVuex.Store({
4. state: {
5. 　　count: 0
6. },
7. mutations: {},
8. actions: {},
9. plugins: [createPersistedState({
10. 　　storage:window.sessionStorage,
11. 　　reducer(val)  {
12.          // 此时，当count发生改变的时候，就会调用此函数，并且val的值为当前state对象，return的值为当前本地存储的value值（本地存储的key值为vuex）
13.          return {
14.              count: val.count,
15. 　　　　  　　 changeCount: 'aaa'
16.          }
17.      }
18. })]
19. }）

复制代码

四：总结

• 其实办理此问题的方法有许多,根本上都是要借助于localStorage大概sessionStroage来存放。
  

来源：https://blog.csdn.net/qq_51441159/article/details/128047610
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！