成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

walterrwu / 2063人閱讀

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

眾所周知，vuex的一個(gè)全局狀態(tài)管理的插件，但是在瀏覽器刷新的時(shí)候，內(nèi)存中的state會(huì)釋放，通常的解決辦法就是用本地存儲(chǔ)的方式保存數(shù)據(jù)，然后再vuex初始化的時(shí)候再賦值給state，手動(dòng)存再手動(dòng)取會(huì)覺得很麻煩，這個(gè)時(shí)候就可以使用vuex的插件vuex-solidification

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

插件原理

vuex有一個(gè)hook方法：store.subscribe((mutation, state) => {}) 每次在mutation方法執(zhí)行完之后都會(huì)調(diào)用這個(gè)回調(diào)函數(shù)，返回執(zhí)行完畢之后的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: [ // 默認(rèn)存儲(chǔ)所有state數(shù)據(jù)到localstorage
        createPersistedState()
    ]
});
插件參數(shù)說明

createPersistedState({options}) : Function

options里面可以有:

key: String 存儲(chǔ)到localStorage, sessionStorage 中對象的key，默認(rèn)為vuex

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

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

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


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


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


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

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

Check out the example on CodeSandbox.

寫在最后 
歡迎交流，提issue和pr，

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103487.html

相關(guān)文章

  • Vuex持久化插件-解決刷新數(shù)據(jù)消失的問題

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

    adie 評論0 收藏0

  • DIY 一個(gè) Vuex 持久化插件

    摘要：接下來我們會(huì)從上述兩個(gè)功能點(diǎn)出發(fā)，完成一個(gè)持久化插件。在我們的持久化插件中，就是在這個(gè)函數(shù)內(nèi)部對數(shù)據(jù)進(jìn)行持久化操作。而則整個(gè)被監(jiān)聽，所以任何對于的改動(dòng)都會(huì)被持久化并能夠被恢復(fù)。 在做 Vue 相關(guān)項(xiàng)目的時(shí)候，總會(huì)遇到因?yàn)轫撁嫠⑿聦?dǎo)致 Store 內(nèi)容丟失的情況。復(fù)雜的項(xiàng)目往往涉及大量的狀態(tài)需要管理，如果僅因?yàn)橐淮嗡⑿戮托枰恐匦芦@取，代價(jià)也未免太大了。 那么我們能不能對這些狀態(tài)進(jìn)行本...

    Half 評論0 收藏0

  • 前端入坑體驗(yàn)與分享

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

    hss01248 評論0 收藏0

  • 刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面

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

    tracymac7 評論0 收藏0

發(fā)表評論

0條評論

walterrwu

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<