一、為什么刷新后數(shù)據(jù)會(huì)丟失

 vuex存儲(chǔ)的數(shù)據(jù)只是在頁面中，相當(dāng)于全局變量，頁面刷新的時(shí)候vuex里的數(shù)據(jù)會(huì)重新初始化，導(dǎo)致數(shù)據(jù)丟失。因?yàn)関uex里的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的，當(dāng)頁面刷新時(shí)，頁面會(huì)重新加載vue實(shí)例，vuex里面的數(shù)據(jù)就會(huì)被重新賦值。

二、解決思路

辦法一：將vuex中的數(shù)據(jù)直接保存到瀏覽器緩存中（sessionStorage、localStorage、cookie）

辦法二：在頁面刷新的時(shí)候再次請求遠(yuǎn)程數(shù)據(jù)，使之動(dòng)態(tài)更新vuex數(shù)據(jù)

辦法三：在父頁面向后臺請求遠(yuǎn)程數(shù)據(jù)，并且在頁面刷新前將vuex的數(shù)據(jù)先保存至sessionStorage（以防請求數(shù)據(jù)量過大頁面加載時(shí)拿不到返回的數(shù)據(jù)）

分析：

辦法一的缺點(diǎn)是不安全，不適用大數(shù)據(jù)量的存儲(chǔ)；

辦法二適用于少量的數(shù)據(jù)，并且不會(huì)出現(xiàn)網(wǎng)絡(luò)延遲；

辦法三是要講的重點(diǎn)，辦法二和辦法一一起使用。

有兩種方式可以把值存儲(chǔ)到sessionStoage

// 第一種方式，標(biāo)準(zhǔn)方法
sessionStorage.setItem('email','xxx@qq.com');
 
// 第二種方式，直接當(dāng)成普通對象屬性賦值。
sessionStorage.blog = 'http://xxxxxx';

兩種獲取值的方法

// 1. 標(biāo)準(zhǔn)方法
var email = sessionStorage.getItem('email');
// 2. 直接取屬性值
var blog = sessionStorage.blog;

移除key/value

// 移除之后，再獲取值，將會(huì)得到 undefined
// 根據(jù)key，移除鍵值對
sessionStorage.removeItem('email');

清空sessionStorage

// 全部清除
sessionStorage.clear();
//也可以指定刪除
sessionStorage.removeItem('keyName')
 

ps：如果這個(gè)key是存儲(chǔ)在store里面的，還可以這么寫

created() {
    // 在頁面加載時(shí)讀取sessionStorage里的狀態(tài)信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在頁面刷新時(shí)將vuex里的信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }

localStorage的操作方法也同理，這里不再贅述

三、解決方法

本人選擇的是sessionStorage，選擇的原因是：

其一，由于vue是單頁面應(yīng)用，操作都是在一個(gè)頁面跳轉(zhuǎn)路由，我只需要在當(dāng)前頁面使用key；

其二，使用sessionStorage可以保證打開頁面時(shí)sessionStorage的數(shù)據(jù)為空，而如果是localStorage則會(huì)讀取上一次打開頁面的數(shù)據(jù)。

具體代碼如下： 

created () {
  if (this.$route.query !== {} && typeof (this.$route.query) === 'string') {
    this.userKey = this.$route.query
    sessionStorage.setItem('userkey', this.userKey) //初次收到userKey，存起來
  } else {
    if (sessionStorage.getItem('userkey')) {
      this.userKey = sessionStorage.getItem('userkey') //不是第一次了，取出來
    } else {
      console.log('##userInfo##', store.state.user.userInfo)
  //如果實(shí)在是沒有了，就直接去store里面取
      this.userKey = store.state.user.userInfo.userKey
      }
  }
  console.log('##userkey##', this.userKey)//檢查userKey變沒變
  this.getcollect()//調(diào)用方法
},
beforeDestroy () {
//毀滅前先移除掉，否則我跳轉(zhuǎn)到其它地方，sessionStorage里面依舊存在著userKey
  sessionStorage.removeItem('userkey')
  },

四、總結(jié)

sessionStorage、localStorage、cookie三者的區(qū)別：

localStorage -- 是永久存儲(chǔ)在本地，除非你主動(dòng)去刪除;【手動(dòng)刪除】

sessionStorage -- 是存儲(chǔ)到當(dāng)前頁面關(guān)閉為止，和其他tab頁沒關(guān)聯(lián);【頁面關(guān)閉就沒有了】

cookie -- 則根據(jù)你設(shè)置的有效時(shí)間來存儲(chǔ)，但缺點(diǎn)是不能儲(chǔ)存大數(shù)據(jù)且不易讀取，會(huì)和后臺進(jìn)行交互。

怎么把一個(gè)對象存儲(chǔ)到瀏覽器本地中

利用sessionStorage或者localStorage把對象存到瀏覽器中;

//保存數(shù)據(jù)
localStorage.setItem("key", "value");
sessionStorage .setItem("key", "value");
//讀取數(shù)據(jù)：
let lastname = localStorage.getItem("key");
let lastname = sessionStorage .getItem("key");
//刪除數(shù)據(jù)：
localStorage.removeItem("key");
sessionStorage .removeItem("key");

值得注意的是： 

存儲(chǔ)的key值只在單頁面使用，則選擇sessionStorage

存儲(chǔ)的key想要在各個(gè)頁面均能使用，要選擇localStorage

Vuex ----狀態(tài)管理模式 + 庫

相當(dāng)于共享倉庫，方便任何組件直接獲取和修改。

state - 數(shù)據(jù)【存項(xiàng)目共享狀態(tài)，是響應(yīng)式的，store的數(shù)據(jù)改變，所有依賴此狀態(tài)的組件會(huì)更新】

$store.state.count

mutations - 方法【同步函數(shù)，只建議在這個(gè)地方修改數(shù)據(jù)】

inc(state, 參數(shù)唯一) {}

$store.commit('inc', 2)

actions -【異步操作】【提交的是mutations，不直接修改狀態(tài)】

increment(context, num) {context.commit()}

this.$store.dispatch('',arg)

getters - 包裝數(shù)據(jù) 【store的計(jì)算屬性，可緩存】

show: function(state) {}

this.$store.getters.show

傳參，返回函數(shù)：show(state) {return function(參數(shù)) {return ...}}【不會(huì)緩存數(shù)據(jù)】

想要存取、修改、刪除vuex倉庫中的狀態(tài)數(shù)據(jù)，需要按照一定的語法規(guī)則，比如按照action-->mutaion-->state的規(guī)則去增刪改查，比如使用輔助函數(shù)如增刪改查vuex中的數(shù)據(jù)

總結(jié) 

到此這篇關(guān)于Vue刷新后頁面數(shù)據(jù)丟失問題解決的文章就介紹到這了,更多相關(guān)Vue刷新后頁面數(shù)據(jù)丟失內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論