vuex使用及持久化方式
更新時(shí)間：2024年08月31日 13:43:33 作者：一塊小餅干兒
這篇文章主要介紹了vuex使用及持久化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
一、使用
第一步：引入：
第二步：定義：注意有nameSpaced，為模塊定義命名空間，避免命名沖突
第三步：使用：
二、vuex state中的數(shù)據(jù)，刷新時(shí)不能保持
例如：
三、如何持久化？
1、利用localStorage，sessionStorage
beforeunload事件：是一個(gè)瀏覽器事件，它在用戶嘗試離開當(dāng)前頁面（例如，通過關(guān)閉標(biāo)簽頁、刷新頁面或訪問另一個(gè) URL）之前觸發(fā)。
這個(gè)事件可以用來提示用戶確認(rèn)離開，或者在用戶離開頁面時(shí)執(zhí)行一些清理工作。
2、利用vuex-presistedstate
第一步：npm install vuex-persistedstate
第二步：
key：存儲(chǔ)數(shù)據(jù)的鍵paths：需要持久化的狀態(tài)路徑storage：存儲(chǔ)方式，可以是 localStorage 或 sessionStorage
以上兩步完成后即生效，刷新頁面時(shí)即是持久化的數(shù)據(jù)：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js最佳實(shí)踐(五招助你成為vuejs大師)
這篇文章主要介紹了Vue.js最佳實(shí)踐,本文主要面向?qū)ο笫怯幸欢╲ue.js 編輯經(jīng)驗(yàn)的開發(fā)者，需要的朋友可以參考下2018-05-05
vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)
這篇文章主要介紹了vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了詳解vue服務(wù)端渲染(SSR)初探，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue3.0 項(xiàng)目搭建和使用流程，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
本篇文章將會(huì)嘗試從算法的角度主要聊一聊vue2的diff策略,幫助讀者朋友在遇到相關(guān)的面試題時(shí)可以和面試官談笑風(fēng)生,文中有相關(guān)的圖解和代碼示例,感興趣的同學(xué)跟著小編一起來看看吧2023-08-08
這篇文章主要給大家介紹了關(guān)于vue+echarts圖表的基本使用步驟,Echarts是一款基于JavaScript的開源可視化圖表庫,而Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界,需要的朋友可以參考下2023-11-11
解決antd 表單設(shè)置默認(rèn)值initialValue后驗(yàn)證失效的問題
這篇文章主要介紹了解決antd 表單設(shè)置默認(rèn)值initialValue后驗(yàn)證失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue中關(guān)于element的el-image 圖片預(yù)覽功能增加一個(gè)下載按鈕(操作方法)
這篇文章主要介紹了vue中關(guān)于element的el-image 圖片預(yù)覽功能增加一個(gè)下載按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue中使用echarts并根據(jù)選擇條件動(dòng)態(tài)展示echarts圖表
雖然老早就看過很多echarts的例子, 但自己接觸的項(xiàng)目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts并根據(jù)選擇條件動(dòng)態(tài)展示echarts圖表的相關(guān)資料,需要的朋友可以參考下2023-12-12
vue的一個(gè)強(qiáng)大功能就是組件化開發(fā),下面這篇文章主要給大家介紹了關(guān)于vue引入組件的幾種方法,文中給出了詳細(xì)的代碼及圖文介紹,需要的朋友可以參考下2024-04-04