Vue Answers

How to make only one module persistent with vuex-persistedstate?

Spread the love

To make only one module persistent with vuex-persistedstate, you can configure the plugin to only persist the state of that specific module. Here’s how you can do it:

First, install vuex-persistedstate if you haven’t already:

npm install vuex-persistedstate

Then, configure it in your Vuex store:

// store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';


const moduleToPersistState = {
  state: {
    // Your state here
  mutations: {
    // Your mutations here
  actions: {
    // Your actions here
  getters: {
    // Your getters here

export default new Vuex.Store({
  modules: {
    moduleToPersist: moduleToPersistState,
    // Other modules here
  plugins: [createPersistedState({
    key: 'moduleToPersist' // Specify the key for the module you want to persist

In the above configuration, moduleToPersist is the module that you want to make persistent.

The createPersistedState plugin is configured with the key option set to 'moduleToPersist', which ensures that only the state of the moduleToPersist module will be persisted.

We replace 'moduleToPersist' with the name of your module.

With this setup, only the state of the moduleToPersist module will be persisted using vuex-persistedstate, while other modules’ state will not be persisted.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *