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

2021-10-06 22:04:42 字數 1699 閱讀 5744

vuex 容器中的資料只是為了方便在其他任何地方能方便的獲取登入狀態資料，但是頁面重新整理還是會丟失資料狀態，所以我們還要把資料進行持久化中以防止頁面重新整理丟失狀態的問題。

基本的思路是：

根目錄下各檔案作用

一、封裝儲存模組

// 封裝模組 使用localstorage實現持久化 只是進行儲存


// 從localstorage中取出一項資料 名字叫name


export


const


getitem


= name =>


// 向localstorage中設定一項資料 名字為name裡面設定值為obj


export


const


setitem


=(name, obj)


=>


// 刪除


export


const


removeitem


= name =>
二、把token儲存在vuex

import vue from


'vue'


import vuex from


'vuex'


import


from


'@/utils/storage.js'


vue.


use(vuex)


export


default


newvuex.store(}


,  mutations:},


actions:


,  modules:


})
三、登入頁面登入成功之後儲存token

// 儲存token


this


.$store.


commit


('msettokeninfo'


, 填寫請求返回值中找到token所在的地方)
四、封裝 axios 配置請求***，在請求頭補充token

/* 對axios進行二次封裝


請求***增加token


響應***處理大資料


*/import store from


'@/store/index.js'


import axios from


'axios'


/*自定義寫法：const *** = axios.create({})


乙個專案中可能有不同的基位址 就要用自定義寫法設定不同的基位址


*/const instance = axios.


create()


// 在instance上新增請求*** 補充請求頭token資訊

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

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

				
vuex和資料持久化
前端將所需資料儲存在vuex中，但是vuex中資料在重新整理後會被清空，而資料持久化，就是在執行瀏覽器重新整理操作時，將vuex中的資料轉存在本地localstorge中，在重新整理時先去local中取，取到之後渲染到頁面，再將資料轉存到vuex中，清空localstorge，也就實現了資料的持久化...