v3.0 preview

[robinvdvleuten]

Just a small comment of what I am thinking about for the upcoming v3.0 release of this plugin. As I noticed that many people have many use cases for this plugin, I'll came up with some sort of HoC or middleware pattern to chain different functionality;

function persistedState(next) {
  const state = next();
  // Set the persisted state back to Vuex...
  console.log(state);
}

function withLocalStorage(next) {
  return function() {
    // Get persisted state from localStorage...
    return next({ foo: "bar" });
  };
}

function onlyPaths() {
  return function(state) {
    // Filter out only the paths you'll need...
    return { foo: "baz" };
  };
}

const store = new Vuex.Store({
  // ...
  plugins: [
    // I really like the readability of the chain here; it reads just like a sentence.
    persistedState(withLocalStorage(onlyPaths(/* array of paths to persist */))),
  ]
})

This way, you can have an optimized plugin configuration for your specific use case (filtered paths, modify before persisting, cookies, localStorage, etc.). To be continued!

[BigWillie]

👍 This could also make it easier to handle a cache type scenario. I'm trying to build something where an ajax request is made - if the data isn't posted, its persisted until a connection becomes available. Its proving crazy hard...

[hitautodestruct]

persistedState(withLocalStorage(onlyPaths(/* array of paths to persist */))),
This pattern might lead to a bit of callback hell?

[robinvdvleuten]

@hitautodestruct not if your using something to compose it like;

persistedState(
  withLocalStorage(),
  onlyPaths(/* array of paths to persist */)
)

[hitautodestruct]

How about an array pattern?

persistedState({
  plugins: [ 'withLocalStorage',  onlyPaths(/* array of paths to persist */)]
})

[robinvdvleuten]

Please see the next branch for any updates on this.