Minimal, Fast, and Flexible Vuex State
Persistence & Synchronization with Local/Session Storage
· English · Korean
npm install --save vuex-state-storage-syncimport { createStore } from "vuex";
import syncStateStorage from "vuex-state-storage-sync";
export default createStore({
// ... your store options
plugins: [
syncStateStorage({
storage: window.localStorage, // or window.sessionStorage
key: "my-app", // Storage key name
paths: ["user", "settings"], // State paths to sync
}),
],
});import Vue from "vue";
import Vuex from "vuex";
import syncStateStorage from "vuex-state-storage-sync";
Vue.use(Vuex);
export default new Vuex.Store({
// ... your store options
plugins: [
syncStateStorage({
storage: window.sessionStorage,
key: "legacy-app",
paths: ["auth.token"],
}),
],
});| Option | Type | Default | Description |
|---|---|---|---|
storage |
Storage | localStorage | Storage engine (localStorage, sessionStorage, or custom) |
key |
string | "store" | Storage key name |
paths |
string[] | undefined | Array of state paths to persist |
overwrite |
boolean | false | If true, state is overwritten on rehydration |
fetchBeforeUse |
boolean | false | Load from storage before plugin install |
getState |
Function | internal | Custom get state from storage |
setState |
Function | internal | Custom set state to storage |
removeState |
Function | internal | Custom remove state from storage |
reducer |
Function | internal | Custom reducer to select part of state |
filter |
Function | internal | Mutation filter |
subscriber |
Function | internal | Custom subscribe implementation |
rehydrated |
Function | internal | Callback after rehydration |
merge |
Function | deepmerge | Custom merge function |
arrayMerge/arrayMerger |
Function | overwrite | Custom array merge logic |
assertStorage |
Function | internal | Storage validation on start |
Type definitions are included, and all options are fully type-safe for use with TypeScript.
const plugin = syncStateStorage({
// ...options
});
store.subscribeAction({
after: (action) => {
if (action.type === "user/logout") {
plugin.removeState("my-app", window.localStorage);
}
},
});const customStorage = {
getItem: (key) => /* ... */,
setItem: (key, value) => /* ... */,
removeItem: (key) => /* ... */
};
syncStateStorage({
storage: customStorage,
// ...
});Contributions are always welcome! Please feel free to open an issue or submit a pull request.
Made with ❤️ by AGUMON 🦖