vuex的持久化怎么做

本篇內容主要講解“vuex的持久化怎么做”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vuex的持久化怎么做”吧!

　　vuex可以進行全局的狀態(tài)管理，但刷新后刷新后數(shù)據(jù)會消失，這是我們不愿意看到的。怎么解決呢，我們可以結合本地存儲做到數(shù)據(jù)狀態(tài)持久化，也可以通過插件vuex-persistedstate。

　　vuex狀態(tài)持久化怎么做

　　1.手動利用HTML5的本地存儲

　　方法

　　1、vuex的state在localStorage或sessionStorage中取值；

　　2、在mutations中,定義的方法里對vuex的狀態(tài)操作的同時對存儲也做對應的操作。

　　這樣state就會和存儲一起存在并且與vuex同步

　　2.利用vuex-persistedstate插件

　　插件的原理其實也是結合了存儲方式,只是統(tǒng)一的配置就不需要手動每次都寫存儲方法。

　　使用方法

　　安裝

　　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的狀態(tài)，localstorage中的vuex也會隨之改變.

　　vuex-persistedstate默認使用localStorage來固化數(shù)據(jù).

到此，相信大家對“vuex的持久化怎么做”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！