Vuex持久化插件-解決刷新數據消失的問題

adie 發布于2019-08-23 10:37 / 3285人閱讀

摘要：可以進行全局的狀態管理，但刷新后刷新后數據會消失，這是我們不愿意看到的。怎么解決呢，我們可以結合本地存儲做到數據持久化，也可以通過插件。

vuex可以進行全局的狀態管理，但刷新后刷新后數據會消失，這是我們不愿意看到的。怎么解決呢，我們可以結合本地存儲做到數據持久化，也可以通過插件-vuex-persistedstate。

歡迎來點點我的個人博客

1.手動利用HTML5的本地存儲

方法

vuex的state在localStorage或sessionStorage或其它存儲方式中取值

在mutations,定義的方法里對vuex的狀態操作的同時對存儲也做對應的操作。

這樣state就會和存儲一起存在并且與vuex同步

問題

最直觀的就是，手動寫比較麻煩。

2.利用vuex-persistedstate插件

插件的原理其實也是結合了存儲方式,只是統一的配置就不需要手動每次都寫存儲方法

使用方法

安裝

npm install vuex-persistedstate  --save

引入及配置

在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

默認存儲到localStorage

想要存儲到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

想使用cookie同理
默認持久化所有state

指定需要持久化的state,配置如下

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

vuex引用多個插件的寫法

譬如：vuex提示的插件和持久化的插件一起使用，配置如下

import createPersistedState from "vuex-persistedstate"
import createLogger from "vuex/dist/logger"
// 判斷環境 vuex提示生產環境中不使用
const debug = process.env.NODE_ENV !== "production"
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})

plugins要是一個一維數組不然會解析錯誤

點擊跳轉插件GITHUB地址

GPU云服務器云服務器數據分析解決的問題 modal消失問題解決問題的方法云計算解決的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96513.html

vuex持久化插件-解決瀏覽器刷新數據消失問題

摘要：眾所周知，的一個全局狀態管理的插件，但是在瀏覽器刷新的時候，內存中的會釋放，通常的解決辦法就是用本地存儲的方式保存數據，然后再初始化的時候再賦值給，手動存再手動取會覺得很麻煩，這個時候就可以使用的插件插件地址歡迎插件原理有一個方法每次在眾所周知，vuex的一個全局狀態管理的插件，但是在瀏覽器刷新的時候，內存中的state會釋放，通常的解決辦法就是用本地存儲的方式保存數據，然后再vue...

walterrwu 2019-08-23 16:54 評論0 收藏0
DIY 一個 Vuex 持久化插件

摘要：接下來我們會從上述兩個功能點出發，完成一個持久化插件。在我們的持久化插件中，就是在這個函數內部對數據進行持久化操作。而則整個被監聽，所以任何對于的改動都會被持久化并能夠被恢復。在做 Vue 相關項目的時候，總會遇到因為頁面刷新導致 Store 內容丟失的情況。復雜的項目往往涉及大量的狀態需要管理，如果僅因為一次刷新就需要全部重新獲取，代價也未免太大了。那么我們能不能對這些狀態進行本...

Half 2019-08-26 13:42 評論0 收藏0
刷新頁面vuex數據不消失和不跳轉頁面

摘要：先說點什么和路由攔截這一塊搗鼓的有一段時間了總算是爬出來了特地來分享一下首先聲明沒有什么基礎介紹用的是登錄狀態存儲的方法進入正題刷新刷新相當與重啟項目，之前獲取到的數據也只是通過暫存起來，項目關閉時就不見了，這有些像電腦重啟，存儲在的數據會先說點什么 vuex和路由攔截這一塊搗鼓的有一段時間了,總算是爬出來了,特地來分享一下,首先聲明沒有什么基礎介紹,用的是登錄狀態存儲session...

tracymac7 2019-08-26 11:32 評論0 收藏0
前端入坑體驗與分享

摘要：同源策略同源策略是一種約定，由公司年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到等攻擊。一、Vue變化檢測背景初始化對象，屬性未知；某些事件觸發時，對象改變（新增屬性），Vue監聽不到原因 Vue.js 不能檢測到對象屬性的添加或刪除，因為Vue.js 在初始化實例時將屬性轉為 getter/setter，所以屬性必須在 dat...

hss01248 2019-08-22 18:09 評論0 收藏0