Vuex State & Storage Synchronization

Minimal, Fast, and Flexible Vuex State
Persistence & Synchronization with Local/Session Storage

---

🖲 Install

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

🕹 Usage

For Vue 3 + Vuex 4

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

For Vue 2 + Vuex 3

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

Custom Remove (e.g., remove state on logout)

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

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

Custom Storage (e.g., cookies, IndexedDB)

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