一、為什么刷新后數據會丟失

 vuex存儲的數據只是在頁面中，相當于全局變量，頁面刷新的時候vuex里的數據會重新初始化，導致數據丟失。因為vuex里的數據是保存在運行內存中的，當頁面刷新時，頁面會重新加載vue實例，vuex里面的數據就會被重新賦值。

二、解決思路

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

辦法二：在頁面刷新的時候再次請求遠程數據，使之動態(tài)更新vuex數據

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

分析：

辦法一的缺點是不安全，不適用大數據量的存儲；

辦法二適用于少量的數據，并且不會出現網絡延遲；

辦法三是要講的重點，辦法二和辦法一一起使用。

有兩種方式可以把值存儲到sessionStoage

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

兩種獲取值的方法

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

移除key/value

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

清空sessionStorage

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

ps：如果這個key是存儲在store里面的，還可以這么寫

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

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

三、解決方法

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

其一，由于vue是單頁面應用，操作都是在一個頁面跳轉路由，我只需要在當前頁面使用key；

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

具體代碼如下： 

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)
  //如果實在是沒有了，就直接去store里面取
      this.userKey = store.state.user.userInfo.userKey
      }
  }
  console.log('##userkey##', this.userKey)//檢查userKey變沒變
  this.getcollect()//調用方法
},
beforeDestroy () {
//毀滅前先移除掉，否則我跳轉到其它地方，sessionStorage里面依舊存在著userKey
  sessionStorage.removeItem('userkey')
  },

四、總結

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

localStorage -- 是永久存儲在本地，除非你主動去刪除;【手動刪除】

sessionStorage -- 是存儲到當前頁面關閉為止，和其他tab頁沒關聯;【頁面關閉就沒有了】

cookie -- 則根據你設置的有效時間來存儲，但缺點是不能儲存大數據且不易讀取，會和后臺進行交互。

怎么把一個對象存儲到瀏覽器本地中

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

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

值得注意的是： 

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

存儲的key想要在各個頁面均能使用，要選擇localStorage

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

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

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

$store.state.count

mutations - 方法【同步函數，只建議在這個地方修改數據】

inc(state, 參數唯一) {}

$store.commit('inc', 2)

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

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

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

getters - 包裝數據 【store的計算屬性，可緩存】

show: function(state) {}

this.$store.getters.show

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

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

總結 

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

最新評論