溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“vuex的持久化怎么做”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vuex的持久化怎么做”吧!
vuex可以進行全局的狀態管理，但刷新后刷新后數據會消失，這是我們不愿意看到的。怎么解決呢，我們可以結合本地存儲做到數據狀態持久化，也可以通過插件vuex-persistedstate。
vuex狀態持久化怎么做
1.手動利用HTML5的本地存儲
方法
1、vuex的state在localStorage或sessionStorage中取值；
2、在mutations中,定義的方法里對vuex的狀態操作的同時對存儲也做對應的操作。
這樣state就會和存儲一起存在并且與vuex同步
2.利用vuex-persistedstate插件
插件的原理其實也是結合了存儲方式,只是統一的配置就不需要手動每次都寫存儲方法。
使用方法
安裝
npminstallvuex-persistedstate--save
引入及配置：在store下的index.js中
importcreatePersistedStatefrom"vuex-persistedstate"
conststore=newVuex.Store({
//...
plugins:[createPersistedState()]
})
默認存儲到localStorage
想要存儲到sessionStorage，配置如下
importcreatePersistedStatefrom"vuex-persistedstate"
conststore=newVuex.Store({
//...
plugins:[createPersistedState({
storage:window.sessionStorage
})]
})
默認持久化所有state
vuex的用法
安裝:
npminstallvuex-persistedstate--save
vuex初始化就開始引入：
每次我們更新vuex的狀態，localstorage中的vuex也會隨之改變.
vuex-persistedstate默認使用localStorage來固化數據.
到此，相信大家對“vuex的持久化怎么做”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
