Vuex的數據持久化


大家好,歡迎來到小小熊貓博客園,我們又再次見面了,這次想與大家分享的知識是Vuex的數據持久化問題,我們都知道,在我們做項目的時候,尤其是做一些組件之間的傳值,比較麻煩(個人認為),但是存到Vuex中一刷新就會消失,如果遇到此類問題的小伙伴不要着急,看小小熊貓博客園為你解惑。

首先 我們想要使用Vuex數據持久化的話必須下載一個插件  我把命令寫在下方,有需要的小伙伴可以自行復制

npm i -S vuex-persistedstate --save

這個呢就是我們Vuex數據持久化的安裝包命令。

下面我們等待安裝成功之后打開我們的項目中的store文件夾,打開里面的js文件,如果有多個js文件的話,可以先用一個做Vuex的數據持久化,不瞎扯了,我們打開之后引入,代碼我放在下面

import createPersistedState from 'vuex-persistedstate'

這行代碼就是引入我們的Vuex數據持久化安裝包中相關的一些東西,然后我們引入了之后最后在actions下面配置這么一行代碼,就可以實現Vuex數據持久化了,上代碼

 plugins:[createPersistedState()]

現在你的代碼就可以對Vuex中的數據進行持久化顯示了,當然Vuex的數據會存放到localStorage中,不妨自己試一試,提醒一下,使用Vuex進行組件傳值就行,千萬不要覺得有了Vuex的存儲路由守衛或者是路由鑒權就可以使用Vuex數據了,我們使用路由守衛還有路由鑒權的時候還是需要我們自己動手進行存儲localStorage的。

好了,今天的知識也分享完了,非常開心能夠與大家分享知識,共同進步,共同學習,最后祝:看到本篇文章的伙伴技術越來越高超,money越來越多。也希望認同我的小伙伴可以動動發財的小手為我點個關注或者幫本篇文章點個贊,鄙人感激不盡。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM