vuex持久化外掛-解決瀏覽器重新整理資料消失問題

摘要： 眾所周知，vuex的一個全域性狀態管理的外掛，但是在瀏覽器重新整理的時候，記憶體中的state會釋放，通常的解決辦法就是用本地儲存的方式儲存資料，然後再vuex初始化的時候再賦值給state，手動存再手動取會覺得很麻煩，這個時候就可以使用vuex的外掛vuex-solidification ...

眾所周知，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，