Vuex踩坑--数据刷新时丢失

　　近期做项目的过程中，使用vuex保存页面公共数据，测试无网情况后又接通网络的情况下，页面进行重新加载。遇到一个小bug——发现在苹果手机IOS系统下，页面刷新重新加载后页面中通过vuex存储并显示的数据丢失了。

 

　　下面先介绍一下产生这种情况的原因：

1. js代码是运行在内存中的，代码运行时的所有变量、函数都是保存在内存中。
2. 刷新页面，以前申请的内存被释放，重新加载脚本代码，变量要重新赋值。
3. 要想刷新后数据不丢失就必须把数据存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。

　　

　　接着我们介绍两种解决上述问题的方案：

一、借用客户端本地存储方案localStorage

　　具体实现描述：

• 在对state数据进行初始化时，从localStorage中取出对应的值。
• 在mutations中添加将相应数据存储至localStorage中的操作。

　　代码如下：

state: {
    // 初始化时从localStorage中取值，没有初始值时置为空数组
    pmh: localStorage.getItem('pmh')||[]
},
mutations: {
    SET_PMH: (state, pmh) => {
    state.pmh = pmh
    // 修改state中数据的同时，在localStorage中进行存储
    localStorage.setItem('pmh',pmh)
    }
}

　　

二、通过vuex的数据缓存插件vue-savedata

　　具体实现描述：

1. 先安装vue-savedata
   • npm install vue-savedata　　或　　yarn add vue-savedata
2. 在store中使用 

import saveData from 'vue-savedata'
 
const store = new Vuex.Store({
    state: {
        selected: {}, 
    },
    mutations: {
        setSelected(state, payload) {
        state.selected = payload
    },
},
//缓存所有store数据到本地 也可以单独缓存
plugins: [saveData()],
})
 
export default store;