Vue Store Adapter

Storagefy's Vue adapter provides seamless integration with Vue's reactive state management systems, particularly focusing on Pinia stores. This adapter synchronizes your Vue store state with your chosen storage backend (localStorage, sessionStorage, or IndexedDB) with minimal configuration.

1. Basic Usage

The Vue adapter works primarily with Pinia, Vue's recommended state management solution, allowing you to persist your store state across page reloads and browser sessions. 

        
import { startStoragefy, getPiniaAdapter } from "storagefy";

// Initialize the storage backend
startStoragefy({
  dbName: "my-vue-app",
  adapter: "indexedDB", // or "localStorage" or "sessionStorage"
  encrypt: true,
  channelName: "vue-sync" // for cross-tab synchronization
});

// Get the Pinia adapter
const { setInStorage, getFromStorage } = getPiniaAdapter();

// Connect with your store
const userStore = useUserStore();
await getFromStorage(userStore, "user"); // Always call this before setInStorage
await setInStorage(userStore, "user", {
  timeout: 3600000, // 1 hour expiration
  ignoreKeys: ["tempData", "password"],
  syncTabs: true
});

2. Using the Helper Function

For a more concise approach, use the setPiniaStorage helper function: 

        
import { startStoragefy, setPiniaStorage } from "storagefy";

// Initialize storage backend
startStoragefy({
  dbName: "my-vue-app",
  adapter: "localStorage"
});

// Use the helper function
const userStore = useUserStore();
await setPiniaStorage(userStore, "user", {
  timeout: 86400000, // 24 hours
  ignoreKeys: ["sessionToken"],
  syncTabs: true
});

3. Test It

4. Advanced Configuration

You can directly instantiate the PiniaAdapter class for more advanced control: 

        
import { PiniaAdapter, IndexedDBAdapter } from "storagefy";

// Create storage adapter instance
const storageAdapter = new IndexedDBAdapter({ 
  dbName: "my-app",
  encrypt: true
});

// Create Pinia adapter with the storage adapter
const piniaAdapter = new PiniaAdapter(storageAdapter);

// Connect with your store
const settingsStore = useSettingsStore();
await piniaAdapter.getFromStorage(settingsStore, "app-settings");
await piniaAdapter.setInStorage(settingsStore, "app-settings", {
  ignoreKeys: ["tempSettings"],
  timeout: 604800000 // 1 week
});

5. Configuration Options

The setInStorage method accepts the following options:

Options Object

  • ignoreKeys: Array of store property keys to exclude from persistence

    Use this for sensitive data or temporary state that doesn't need persistence.

  • timeout: Expiration duration in milliseconds

    After this duration, the stored data will be considered expired and removed.

  • syncTabs: Boolean flag to enable cross-tab synchronization

    When true, changes made in one browser tab will be reflected in all others. Requires channelName to be set during startStoragefy.

6. Handling Store Changes

The Vue adapter automatically subscribes to store changes using Pinia's $subscribe method and persists updates to your chosen storage. When data changes in other tabs (with syncTabs: true), the adapter will update the local store without triggering additional storage operations. 

        
// Store changes are automatically persisted
userStore.$patch({ 
  name: "New Username",
  preferences: { theme: "dark" }
});

// The above change is automatically synchronized to storage
// and to other tabs if syncTabs is enabled

7. API Reference

getPiniaAdapter([options])

Returns a configured Pinia adapter instance. Options include:

  • adapterParams: Configuration for the underlying storage adapter

Returns: { setInStorage, getFromStorage } methods

setPiniaStorage(store, key, [options])

Helper function that internally calls getFromStorage followed by setInStorage.

  • store: Pinia store instance
  • key: Storage key string
  • options: Configuration options (ignoreKeys, timeout, syncTabs)

Returns: Promise resolving to true on success

PiniaAdapter Class Methods

  • setInStorage(store, key, options): Persists store state and sets up subscription
  • getFromStorage(store, key): Loads persisted state into store
  • destroy(): Cleans up subscriptions when adapter is no longer needed

8. Best Practices

  • Always call getFromStorage before setInStorage to hydrate your store with existing data
  • Use ignoreKeys for sensitive data like authentication tokens or large temporary objects
  • Set appropriate timeout values for different types of data (e.g., longer for preferences, shorter for session data)
  • Enable syncTabs for shared state across multiple browser tabs
  • Consider using encryption (encrypt: true) when storing sensitive user data