vuex-state-storage-sync

Vuex State & Storage Synchronization

Minimal, Fast, and Flexible Vuex State

Persistence & Synchronization with Local/Session Storage

---

🖲 Install

``bash
npm install --save vuex-state-storage-sync
`

🕹 Usage

$3

`js
import { 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
}),
],
});
`

$3

`js
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"],
}),
],
});
`

⚙️ Options

| 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 |

🛡 TypeScript Support

Type definitions are included, and all options are fully type-safe for use with TypeScript.

💡 Advanced Usage

$3

`js
const plugin = syncStateStorage({
// ...options
});

store.subscribeAction({
after: (action) => {
if (action.type === "user/logout") {
plugin.removeState("my-app", window.localStorage);
}
},
});
`

$3

`js
const customStorage = {
getItem: (key) => / ... /,
setItem: (key, value) => / ... /,
removeItem: (key) => / ... /
};

syncStateStorage({
storage: customStorage,
// ...
});
`

💬 Commit Message Convention

| When | Commit Message |
| :----------- | :---------------------------- |
| Add feature | feat: ⚡️ Add function |
| Fix bug | fix: 🐞 Fix bug |
| Refactor | refactor: 🛠 Refactoring |
| Add package | package: 📦 Add package |
| Docs change | docs: 📚 Fix readme |
| Style change | style: 👁 Improvements style |
| Releases | releases: 🎉 Releases` |

📜 License

MIT

> ### Made with ❤️ by AGUMON 🦖
>
> ### GitHub