Synchronization of vuex state and storage
npm install vuex-state-storage-sync

Minimal, Fast, and Flexible Vuex State
Persistence & Synchronization with Local/Session Storage
---
``bash`
npm install --save vuex-state-storage-sync
`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
}),
],
});
`
`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"],
}),
],
});
`
| 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.
`js
const plugin = syncStateStorage({
// ...options
});
store.subscribeAction({
after: (action) => {
if (action.type === "user/logout") {
plugin.removeState("my-app", window.localStorage);
}
},
});
`
`js
const customStorage = {
getItem: (key) => / ... /,
setItem: (key, value) => / ... /,
removeItem: (key) => / ... /
};
syncStateStorage({
storage: customStorage,
// ...
});
`
| When | Commit Message |
| :----------- | :---------------------------- |
| Add feature | feat: ⚡️ Add function |fix: 🐞 Fix bug
| Fix bug | |refactor: 🛠 Refactoring
| Refactor | |package: 📦 Add package
| Add package | |docs: 📚 Fix readme
| Docs change | |style: 👁 Improvements style
| Style change | |releases: 🎉 Releases` |
| Releases |
> ### Made with ❤️ by AGUMON 🦖
>
> ### GitHub