Persist state in Vue by using the `vue-persistedstate` reducer

Question

Persist state in Vue by using the `vue-persistedstate` reducer

Currently, I am utilizing vue-persistedstate with specific modules that are set to be persisted using the path attribute. This setup is functioning smoothly.

However, I encountered an issue when attempting to combine it with the reducer. In this scenario, the modules specified in the path no longer persist, and all modules end up being persisted by the reducer instead. How can I properly configure the reducer to only persist the modules listed in the path?

const persistedstate = new createPersistedState({
  key: "newsportal-vuex",
  storage: window.localStorage, 
  paths: ["auth", "venues", "play", "playWS", "purchaseSettings"], // only the persisted ones
  reducer(val) {
    if (!localStorage.getItem("newsportal_isuseracceptcookie")) {
      // DO NOT PERSIST STATE IF USER DECLINES COOKIES
      return {};
    }
    return val; // <-this returns ALL MODULES. I want to only include modules from the specified paths
  }
});

Thank you in advance for any assistance provided.

javascript vue.js vuex

Answer 1

Answer №1

just had a realization that I should rebuild the object

transform(val, paths) {
    if (!localStorage.getItem("newsportal_isuseracceptcookie")) {
      // do not use persistedstate if user declines cookies
      return {};
    }

    // create transformed state based on specified paths
    let transformer = {};

    Object.entries(val).forEach(entry => {
        const [key, value] = entry;
        if (paths.includes(key)) {
            transformer[key] = value;
        }
    });

    return transformer;
}

Answer 2

just had a realization that I should rebuild the object

transform(val, paths) {
    if (!localStorage.getItem("newsportal_isuseracceptcookie")) {
      // do not use persistedstate if user declines cookies
      return {};
    }

    // create transformed state based on specified paths
    let transformer = {};

    Object.entries(val).forEach(entry => {
        const [key, value] = entry;
        if (paths.includes(key)) {
            transformer[key] = value;
        }
    });

    return transformer;
}

Persist state in Vue by using the `vue-persistedstate` reducer

Answer №1

Similar questions

Creating a new buffer by extracting a segment of another buffer in Node.js

Using AngularJS to update attributes in an HTML tag within a string

Tips for accessing a variable value within a JavaScript function

Execute the npm command to organize the files in case the specified directory does

Reversing the order of input-group-addon and input in bootstrap on mobile devices

failure of svg spinning

Transfer Data from a Factory to a Controller in AngularJS

Determining when a text area has selected text without constant checking

Save the content of a string object into an array

I'm receiving a TypeError in Nodejs indicating that the hashPassword function is not recognized as a function. Can anyone offer advice on how to

The behavior of Elementor lightbox buttons upon being clicked

Unable to render chart using angularjs-nvd3-directives

Issue: Attempting to access the `userName` property on an undefined object (`tem`), resulting in a TypeError while using flalist

Streamline a javascript code with numerous elements

Hover over the sprites using the "spritely" plugin to see the magic unfold

random mongoose response 500

Is there a way to adjust the font size in Javascript/Html without changing the color?

A step-by-step guide on creating a route in vue.js

How to use jQuery to extract a particular text from an anchor tag

When using Bcrypt compare(), the result is consistently incorrect