vuex資料持久化儲存

2022-06-06 02:57:07 字數 748 閱讀 9612

想想好還是說下vuex資料的持久化儲存吧。依稀還記得在做第乙個vue專案時,由於剛剛使用vue,對vue的一些基本概念只是有乙個簡單的了解。當涉及到非父子元件之間通訊時,選擇了vuex。只是後來竟然發現,重新整理頁面,資料去哪了???一臉懵逼。其實vuex本質上只是乙個公共變數,是儲存在瀏覽器記憶體中的,重新整理頁面,瀏覽器記憶體重置,資料也會被清空。如果要做資料持久化儲存,肯定需要借助瀏覽器快取,常用的也就localstorage,sessionstorage,indexdb之前了解一點,用的不是很多。現在也有很多資料持久化儲存外掛程式,原理都差不多,下面介紹一下vuex-persist的基本使用:

1、安裝 

npm install vuex-persist -d

2、基本使用

import vue from 'vue'import vuex from 'vuex'import state from './state'import getters from './getters'import mutations from './mutations'import actions from './actions'import vuexpersist from 'vuex-persist'vue.use(vuex);

const vuexlocal = new

vuexpersist();

const store = new

vuex.store();

export

default store

VueX資料持久化

解決 vue重新整理時獲取不到資料 解決方案 1.本地儲存 2.vuex資料持久化工具外掛程式 import vue from vue import vuex from vuex vue.use vuex export default new vuex.store mutations 元件中使用 加...

VUEX資料持久化 token資料儲存問題

vuex 容器中的資料只是為了方便在其他任何地方能方便的獲取登入狀態資料,但是頁面重新整理還是會丟失資料狀態,所以我們還要把資料進行持久化中以防止頁面重新整理丟失狀態的問題。基本的思路是 根目錄下各檔案作用 一 封裝儲存模組 封裝模組 使用localstorage實現持久化 只是進行儲存 從loca...

vuex資料狀態持久化

vuex可以進行全域性的狀態管理,但重新整理後重新整理後資料會消失,這是我們不願意看到的。怎麼解決呢,我們可以結合本地儲存做到資料持久化,也可以通過外掛程式 vuex persistedstate。1通過 vuex persistedstate這個外掛程式,來實現將資料儲存到本地 npm insta...