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;