vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問題
為什么刷新之后vuex的狀態(tài)就沒了?
原因是刷新之后js初始化,vuex重新初始化了;
常見的解決方案
1,mounted里面調接口重新給state賦值,太麻煩,pass
2,watch里面監(jiān)聽state,再賦值,也很low
完美方案是利用sessionStorage/localStorage
做一個暫時的儲存
store的模塊化結構

主要是針對mutations和getters
做一個簡單的賦值和取值封裝
mutations.js改變state的同時在本地做一個備份
const setStorage = (key, value) => {
if (typeof (value) === 'object') {
value = JSON.stringify(value)
}
sessionStorage.setItem(key, value)
}
/*
* 避免刷新之后vuex被重置,在sessionStorage做一個備份
*/
const mutations = {
set_userInfo (state, payload) {
state.userInfo = payload
setStorage('userInfo', payload)
},
set_token (state, payload) {
state.token = payload
setStorage('token', payload)
},
set_roles (state, payload) {
state.roles = payload
setStorage('roles', payload)
},
set_breadcrumb (state, payload) {
state.breadcrumb = payload
setStorage('breadcrumb', payload)/* */
}
}
export default mutations
getters.js 取值時默認從state里面取,沒有就從本地拿
import createdRoutes from '@/utils/createdRoutes.js'
import { asyncRoutes } from '@/router/index.js'
let getStoryage = (item) => {
let str = sessionStorage.getItem(item)
return JSON.parse(str)
}
const getters = {
get_userInfo: (state) => {
return state.userInfo ? state.userInfo : getStoryage('userInfo')
},
get_token: (state) => {
return state.token ? state.token : sessionStorage.getItem('token')
},
get_roles: (state) => {
return state.roles.length ? state.roles : getStoryage('roles')
},
addRouters: (state, getters) => {
let routes = createdRoutes(asyncRoutes, getters.get_roles)
return routes
},
get_breadcrumb: (state, getters) => {
return state.breadcrumb.length ? state.breadcrumb : getStoryage('getStoryage')
}
}
export default getters;
在頁面vue文件直接用mapGetters獲取狀態(tài)值
這樣一來就算state被清空了,還可以在本地儲存里面獲取狀態(tài)值
后記:
本來想寫一個插件完成上面的事,結果發(fā)現(xiàn)一個已經寫好的 vuex-persistedstate
用法:
import state from './state.js'
import getters from './getters.js'
import mutations from './mutations.js'
import actions from './actions.js'
import Vuex from 'vuex'
import Vue from 'vue'
import { deepCopy } from '@/utils/util'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
let store = new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
state,
getters,
mutations,
actions,
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer (state) {
let _state = deepCopy(state) // 深拷貝一份 刪除不想保存的
delete _state.hasLogin
delete _state.ziYuanLaiYuan
delete _state.orderStatus
delete _state.taxPersonType
return _state
}
})]
})
export default store
深拷貝
```bash
/**
* 深拷貝
* @param {Array,Object} obj
*/
export const deepCopy = (obj) => {
// 根據(jù)obj的類型判斷是新建一個數(shù)組還是一個對象
let newObj = obj instanceof Array ? [] : {};
for (let key in obj) {
// 判斷屬性值的類型,如果是對象遞歸調用深拷貝
newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
}
return newObj;
}
如何讓vuex數(shù)據(jù)持久化
為什么要讓vuex數(shù)據(jù)持久化
在使用vuex的時候,會發(fā)現(xiàn)刷新頁面之后state中存儲的數(shù)據(jù)會被重置,因為刷新瀏覽器的時候會導致整個頁面重新加載,vuex的state也會全部重新加載,所以為了防止這類情況的發(fā)生,我們會將vuex中的數(shù)據(jù)進行本地存儲,防止頁面刷新丟失vuex中的數(shù)據(jù)。
如何將vuex中的數(shù)據(jù)持久化
1.我們需要安裝一個插件,我們需要借助這個vuex-persistedstate插件進行持久化
// 安裝依賴包 npm install vuex-persistedstate ?--save
2.使用vuex-persistedstate插件來進行持久化
key是存儲數(shù)據(jù)的鍵名(本地存儲)paths是state中那些需要被的數(shù)據(jù),如果是模塊下的數(shù)據(jù),則在前面加上模塊名稱plugins要的是一個一維數(shù)組不然會解析錯誤
import createPersistedState from 'vuex-persistedstate'
?
const store = new Vuex.Store({
? // ...
? plugins: [
? ? createPersistedState({
? ? key: 'stort',
? ? ?可以寫多個
? ? paths: ['userinfo', ......]
? ?? ?})
? ]
})3.指定需要持久化的數(shù)據(jù)
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
?// ...
?plugins: [createPersistedState({
? storage: window.sessionStorage,
? reducer(val) {
? ?return {
? ?// 只儲存state中的assessmentData
? ?assessmentData: val.assessmentData
? }
? }
?})]以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
解決在vue項目中,發(fā)版之后,背景圖片報錯,路徑不對的問題
下面小編就為大家分享一篇解決在vue項目中,發(fā)版之后,背景圖片報錯,路徑不對的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue-router history模式服務器端配置過程記錄
vue路由有hash和history兩種模式,這篇文章主要給大家介紹了關于vue-router history模式服務器端配置的相關資料,需要的朋友可以參考下2021-06-06
vue3.0使用vue-pdf-embed在線預覽pdf 控制頁碼顯示范圍不生效問題解決
這篇文章主要介紹了vue3.0使用vue-pdf-embed在線預覽pdf 控制頁碼顯示范圍不生效問題的問題及解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-01-01
vue數(shù)字金額動態(tài)變化功能實現(xiàn)方法詳解
這篇文章主要介紹了vue實現(xiàn)數(shù)字金額動態(tài)變化效果,數(shù)字動態(tài)變化是我們在前端開發(fā)中經常需要做的效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2022-09-09

