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

walterrwu 發布于2019-08-23 16:54 / 2060人閱讀

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

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

插件地址: vuex-solidification , 歡迎star

插件原理

vuex有一個hook方法：store.subscribe((mutation, state) => {}) 每次在mutation方法執行完之后都會調用這個回調函數，返回執行完畢之后的state

使用方法 安裝

npm install --save vuex-solidification

引入及配置

import Vue from "vue"
import Vuex from "vuex"
import count from "./count/index.js";
import createPersistedState from "vuex-solidification";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count: {
            value: 0,
            num: 1
        },
        pos: 1
    }
    plugins: [ // 默認存儲所有state數據到localstorage
        createPersistedState()
    ]
});

插件參數說明

createPersistedState({options}) : Function

options里面可以有:

key: String 存儲到localStorage, sessionStorage 中對象的key，默認為vuex

local: Object 和 session: Object, 分別代表localStorage的配置和sessionStorage的配置

local 和 session 里面可以有: include: Array 和 exclude: Array

配置例子

createPersistedState({
    local: {
        include: ["count.value"] 
    }
})
/* 
    hook鉤子觸發之后，localstorage里面存儲的對象為:
    {
        count: {
            value: 0,
        }
    }
*/


createPersistedState({
    local: {
        exclude: ["count.value"] 
    }
})
/* 
    hook鉤子觸發之后，localstorage里面存儲的對象為:
    {
        count: {
            num: 1
        },
        pos: 1
    }
*/


createPersistedState({
    session: {
        include: ["count.value"] 
    }
})
/* 
    hook鉤子觸發之后，sessionstorage里面存儲的對象為:
    {
        count: {
            value: 0,
        }
    }
*/


createPersistedState({
    session: {
        exclude: ["count.value"] 
    }
})
/* 
    hook鉤子觸發之后，sessionstorage里面存儲的對象為:
    {
        count: {
            num: 1
        },
        pos: 1
    }
*/

createPersistedState({
    session: {
        include: ["count"] 
    },
    local: {
        include: ["pos"]
    }
})
/* 
    hook鉤子觸發之后，
    sessionstorage里面存儲的對象為:
    {
        count: {
            value: 0,
            num: 1
        },
    }
    sessionstorage里面存儲的對象為:
    {
        pos: 0
    }
*/

代碼例子

Check out the example on CodeSandbox.

寫在最后

歡迎交流，提issue和pr，

GPU云服務器云服務器 webrtc 瀏覽器刷新問題 modal消失問題數據分析解決問題數據分析問題解決

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

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

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

摘要：可以進行全局的狀態管理，但刷新后刷新后數據會消失，這是我們不愿意看到的。怎么解決呢，我們可以結合本地存儲做到數據持久化，也可以通過插件。 vuex可以進行全局的狀態管理，但刷新后刷新后數據會消失，這是我們不愿意看到的。怎么解決呢，我們可以結合本地存儲做到數據持久化，也可以通過插件-vuex-persistedstate。歡迎來點點我的個人博客showImg(https://user-...

adie 2019-08-23 10:37 評論0 收藏0
DIY 一個 Vuex 持久化插件

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

Half 2019-08-26 13:42 評論0 收藏0
前端入坑體驗與分享

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

hss01248 2019-08-22 18:09 評論0 收藏0
刷新頁面vuex數據不消失和不跳轉頁面

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

tracymac7 2019-08-26 11:32 評論0 收藏0