快捷導(dǎo)航

vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問(wèn)題

更新時(shí)間：2022年03月30日 10:53:48 作者：秋刀魚(yú)笛滋味

這篇文章主要介紹了vuex刷新之后數(shù)據(jù)丟失,數(shù)據(jù)持久化,vuex-persistedstate問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

為什么刷新之后vuex的狀態(tài)就沒(méi)了？

原因是刷新之后js初始化，vuex重新初始化了；

常見(jiàn)的解決方案

1，mounted里面調(diào)接口重新給state賦值，太麻煩，pass

2，watch里面監(jiān)聽(tīng)state,再賦值，也很low

vuex理解不透徹的可以先看看

完美方案是利用sessionStorage/localStorage

做一個(gè)暫時(shí)的儲(chǔ)存

store的模塊化結(jié)構(gòu)

在這里插入圖片描述

主要是針對(duì)mutations和getters

做一個(gè)簡(jiǎn)單的賦值和取值封裝

mutations.js改變state的同時(shí)在本地做一個(gè)備份

const setStorage = (key, value) => {
  if (typeof (value) === 'object') {
    value = JSON.stringify(value)
  }
  sessionStorage.setItem(key, value)
}
/*
* 避免刷新之后vuex被重置，在sessionStorage做一個(gè)備份
 */
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 取值時(shí)默認(rèn)從state里面取，沒(méi)有就從本地拿

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;

在頁(yè)面vue文件直接用mapGetters獲取狀態(tài)值

這樣一來(lái)就算state被清空了，還可以在本地儲(chǔ)存里面獲取狀態(tài)值

后記：

本來(lái)想寫(xiě)一個(gè)插件完成上面的事，結(jié)果發(fā)現(xiàn)一個(gè)已經(jīng)寫(xiě)好的 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的類型判斷是新建一個(gè)數(shù)組還是一個(gè)對(duì)象
  let newObj = obj instanceof Array ? [] : {};
  for (let key in obj) {
    // 判斷屬性值的類型，如果是對(duì)象遞歸調(diào)用深拷貝
    newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
  }
  return newObj;
}

如何讓vuex數(shù)據(jù)持久化

為什么要讓vuex數(shù)據(jù)持久化

在使用vuex的時(shí)候，會(huì)發(fā)現(xiàn)刷新頁(yè)面之后state中存儲(chǔ)的數(shù)據(jù)會(huì)被重置，因?yàn)樗⑿聻g覽器的時(shí)候會(huì)導(dǎo)致整個(gè)頁(yè)面重新加載，vuex的state也會(huì)全部重新加載，所以為了防止這類情況的發(fā)生，我們會(huì)將vuex中的數(shù)據(jù)進(jìn)行本地存儲(chǔ)，防止頁(yè)面刷新丟失vuex中的數(shù)據(jù)。

如何將vuex中的數(shù)據(jù)持久化

1.我們需要安裝一個(gè)插件，我們需要借助這個(gè)vuex-persistedstate插件進(jìn)行持久化

// 安裝依賴包
npm install vuex-persistedstate ?--save

2.使用vuex-persistedstate插件來(lái)進(jìn)行持久化

key是存儲(chǔ)數(shù)據(jù)的鍵名(本地存儲(chǔ))
paths是state中那些需要被的數(shù)據(jù)，如果是模塊下的數(shù)據(jù)，則在前面加上模塊名稱
plugins要的是一個(gè)一維數(shù)組不然會(huì)解析錯(cuò)誤

import createPersistedState from 'vuex-persistedstate'
?
const store = new Vuex.Store({
? // ...
? plugins: [
? ? createPersistedState({
? ? key: 'stort',
? ? ?可以寫(xiě)多個(gè)
? ? paths: ['userinfo', ......]
? ?? ?})
? ]
})

3.指定需要持久化的數(shù)據(jù)

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
?// ...
?plugins: [createPersistedState({
? storage: window.sessionStorage,
? reducer(val) {
? ?return {
? ?// 只儲(chǔ)存state中的assessmentData
? ?assessmentData: val.assessmentData
? }
? }
?})]

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: