Vuex 解決了多視圖之間的數(shù)據(jù)共享問題神得。但是運(yùn)用過程中又帶來了一個新的問題是,Vuex 的狀態(tài)存儲并不能持久化饥侵。也就是說當(dāng)你存儲在 Vuex 中的 store 里的數(shù)據(jù)鸵赫,只要一刷新頁面,數(shù)據(jù)就丟失了躏升。
原來是這個插件報錯卖局,后來再次尋找Vue持久化存儲插件找到了 vuex-persistedstate 這個插件,就抱著試一試的心態(tài)看看是否有用双霍,后來發(fā)現(xiàn)IE瀏覽器能夠打開砚偶,頁面刷新數(shù)據(jù)也不會丟失
使用方法
安裝
npm install vuex-persistedstate --save
引入及配置
在store下的index.js中
import persistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
plugins: [persistedState()]
})
默認(rèn)存儲到localStorage
想要存儲到sessionStorage,配置如下
import persistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [persistedState ({
storage: window.sessionStorage
})]
})