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

Angular Directives in Error

How to set up 'ng serve' command in Angular to automatically open a private browsing window?

Vue has detected an error during rendering: "TypeError: state.actionInfo.find is not a function"

The element will only show up upon resizing (in Safari web browser)

Can the .scroll function be turned off when a user clicks on an anchor link that causes the page to scroll?

Solutions for resolving the issue of not being able to load images when using merged-images in JavaScript

Replace the # symbol with #! in Vue.js router

adding content to div is becoming less speedy

AngularJS - Sending event to a specific controller

Issues of unfulfilled requirements in the recent npm (and node) updates

Is there a way to synchronize the autohide duration for both the LinearProgress MUI and SnackBar components?

Tips for incorporating the camera from fbxloader into your three.js scene

Determine total and showcase it as the range slider is adjusted

The useEffect hook is not successfully fetching data from the local db.json file

JavaScript: Incorporating an operator into a specific object (instead of the entire class)

JavaScript can be utilized to eliminate bootstrap tooltip attributes

The Typescript Decorator is triggered two times

I am interested in creating JSON data

"Experience the latest version of DreamFactory - 2.0.4

Trouble with HTTPS request in Android fragment