Vuex Persist

Overview

Vuex-persist is a Vuex plugin that allows you to save your app’s state to a persisted storage like Cookies or localStorage. It enables automatic saving of store on mutation, choosing which mutations trigger store save, and supports saving partial store using a reducer function. The plugin also features compatibility with VueJS v2.0 and above, and Vuex v2.1 and above.

Features

• Distribution Formats: v1.5 is distributed as esm and cjs both, allowing for better tree shaking and module compatibility.
• Support for Promise Based Stores: Added support for localForage and other Promise based stores.
• Automatic State Restoration: Automatically restores the store when the app loads.
• Mutations Trigger: Choose which mutations trigger store save using a filter function.
• Partial Store Saving: Save some parts of the store to localStorage and some to sessionStorage.
• Module Support: Works perfectly with modules in the store.
• Multiple Instances: Create multiple VuexPersistence instances to save different parts of the store to different sources.

Installation

To install vuex-persist, you can use Vue CLI Build Setup with Webpack or any bundler. If you need to transpile for target es5, follow the steps below:

1. Install the module using npm or yarn.

   npm install vuex-persist --save
   

2. Import the module in your project.

   import VuexPersistence from 'vuex-persist';
   

3. Use VuexPersistence as a plugin in your Vue app.

   const vuexLocal = new VuexPersistence({
       storage: window.localStorage,
   });
   
   Vue.use(Vuex);
   const store = new Vuex.Store({...your modules});
   vuexLocal.plugin(store);
   

Summary

Vuex-persist is a useful Vuex plugin that simplifies the persistent storage of your app’s state. With features like automatic state restoration, partial store saving, and support for Promise based stores, it provides a convenient solution for managing state persistence in VueJS applications. Its compatibility with VueJS and Vuex versions makes it a versatile choice for developers looking to implement efficient state management in their projects.