頁面重新整理vuex資料消失問題解決方案

vbox持續進行中，哀家苦啊，有沒有誰給個star。

vuex是vue用於資料儲存的，和redux充當同樣的角色。

最近在vbox開發的時候遇到的問題，頁面重新整理或者關閉瀏覽器再次開啟的時候資料歸零。這是頭疼的問題。

網上搜，大家的方案都是把資料轉移到 localstorage或者其他持久化儲存（例如indexdb）。

這倒是可以，我在設計之初因為匆忙，沒有考慮周全，這下好，然不成每個 mutation都去存一下。

這個弄的我很不開心，週六在公司，本來就困的要死，又想不到合理的解決方案，昏昏沉沉睡著了。

醒了後，最初想採用柯里化和高階函式來解決這個問題，很可惜，沒有正解。

最小化修改，又不想動現有**，**二字最為不過。記得上次我寫ibook之初，也用proxy來攔截修改，同時存資料到磁碟檔案。

沒錯方案就是es6的proxy，嘗試之後，確實是可以的。

這裡有兩個問題

1. 初始值的問題。

2. 我要可以配置哪些字段需要持久化，store裡面的資料，不代表我都需要持久化。

首先解決是 localstorage儲存的問題，因為需要轉換字串，簡單封裝乙個 lstorage.js，當然你也可以用 , 或者你喜歡的，小輪子我就自己寫了。

const ls = window.localstorage
// export default  catch (err) 
},setitem(key, val) ,
clear() ,
keys() ,
removeitem(key) 
}

其次就是**的簡單封裝，lsproxy.js

這個版本還是有問題的，現在只能**二級屬性，對現在的我而言已經是夠用了的。

createhanlder 建立二級屬性的**

copy 複製物件，當然你可以寫更加相容優雅的方法

proxy 建立state的**

import lstorage from './lstorage'
/** * **二級屬性
* @param  lskey 存在localstorage的key
* @param  pk    一級屬性的key
*/function createhanlder(lskey, pk) 
return reflect.set(target, key, value, receiver)}}}
/** * 僅僅存需要存放的資料
* @param  source 
* @param  keys 
*/function copy(source, keys = ) 
let d = object.create(null)
keys.foreach(k => )
return d
}/**
* **state
* @param  initstate 初始化的值
* @param  lskey  localstorage的key
* @param  keys   需要儲存的鍵
*/const proxy = function (initstate, lskey, keys = ) , initstate, lstorage.getitem(lskey))
// **二級屬性
keys.foreach(k => )
// 存入合併的值
lstorage.setitem(lskey, copy(obj, keys))
return new proxy(obj, 
})}export

呼叫這邊，基本就沒有什麼變化, 就多了一句state= proxy(state, 'playing', ['list'])

import  from '../utils/lsproxy'
let state =state= proxy(state, 'playing', ['list'])const mutations =  state 
* @param  song 歌曲資訊 
*/addsong(state, song) 
},/**
* 新增歌曲
* @param  state  內建
* @param  songs  歌曲列表
*/addsongs(state, songs) 
})},
/*** 刪除歌曲
* @param  state 
* @param  songmid  歌曲**id 
*/removesong(state, songmid) ,
/*** 批量刪除歌曲
* @param  state 
* @param  songmids 歌曲**列表 
*/removesongs(state, songmids = ) )
},/**
* @param  state 
* @param  song 為空
*/next(state, song) 
return
}if (!state.current && state.list && state.list.length > 0) 
// 如果不是插放，並且current不為空
if (!song && state.current)  else }}}
export default

這種方案的缺點也是很明顯的，

1. **只能**二級，對我一般情況應該是夠用了，扁平化state

2. **二級屬性和陣列，要是屬性平凡修改的時候，**是會重複觸發的，比如，新增30首歌曲的時候，是發生了30次儲存。當然我覺得也是有方案可以優化的。

優點我覺得是，

1. state的資料與localstorage的同步過程分離開

2. 對現有**的注入是相當少的。

當然我上面**本身也還是存在問題的

1. 二級監聽不能在proxy執行的時候返回，因為如果屬性預設值為null/undefined，或者初始化就沒有設定預設值，是不會被監聽到的，應該是放到一級屬性監聽裡面, 進行乙個判斷

不知道各位大神有什麼好的方法，可以分享出來。

vuex重新整理資料消失問題

vue構建的單頁大型專案中，可能會用到vuex vuex 的狀態儲存是響應式的，當 vue 元件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的元件也會相應地得到高效更新。但是有乙個問題就是 vuex的儲存的資料只是在頁面的中，相當於我們定義的全域性變數，重新整理之後，...

vuex重新整理資料消失問題

Vuex資料頁面重新整理丟失問題解決方案

用vue做專案開發很久了，對於vuex能用會用，但是因為狀態脫離頁面和重新整理丟失兩個原因，一直都有種牴觸，特別是一些簡單的資料都是通過query或者本地儲存就解決了，然而對於一些複雜內容，不可避免的還是要使用vuex去處理真香但是重新整理丟失的問題，的確叫人頭大。最近閒下來，我們來研究下怎麼...

頁面重新整理vuex資料消失問題解決方案

vuex重新整理資料消失問題

vuex重新整理資料消失問題

Vuex資料頁面重新整理丟失問題解決方案

相關推薦