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;