Add filter to narrow down mutations and improve performance (#12)

* add filter to narrow down mutations and improve performance

* Update README.md

Update comment and fix typo

README.md

@@ -37,6 +37,7 @@ can be provided to configure the plugin for your specific needs:
 - `storage <Storage>`: Instead for (or in combination with) `getState` and `setState`. Defaults to localStorage (or internal storage for Server Side Rendering).
 - `getState <Function>`: A function that will be called to rehydrate a previously persisted state. Defaults to using `storage`.
 - `setState <Function>`: A function that will be called to persist the given state. Defaults to using `storage`.
+- `filter <Function>`: A function that will be called to filter any mutations which will trigger `setState` on storage eventually. Defaults to `() => true`
 
 ## Customization
 

dist/vuex-persistedstate.js

@@ -62,6 +62,7 @@ function createPersistedState(ref) {
   var setState = ref.setState; if ( setState === void 0 ) setState = function (key, state, storage) { return storage.setItem(key, JSON.stringify(state)); };
   var reducer = ref.reducer; if ( reducer === void 0 ) reducer = defaultReducer;
   var storage = ref.storage; if ( storage === void 0 ) storage = defaultStorage;
+  var filter = ref.filter; if ( filter === void 0 ) filter = function () { return true; };
   var subscriber = ref.subscriber; if ( subscriber === void 0 ) subscriber = function (store) { return function (handler) { return store.subscribe(handler); }; };
 
   return function (store) {
@@ -73,7 +74,9 @@ function createPersistedState(ref) {
     }
 
     subscriber(store)(function (mutation, state) {
-      setState(key, reducer(state, paths), storage);
+      if (filter(mutation)) {
+        setState(key, reducer(state, paths), storage);
+      }
     });
   }
 }

src/plugin.js

@@ -43,6 +43,7 @@ export default function createPersistedState({
   setState = (key, state, storage) => storage.setItem(key, JSON.stringify(state)),
   reducer = defaultReducer,
   storage = defaultStorage,
+  filter = () => true,
   subscriber = store => handler => store.subscribe(handler)
 } = {}) {
   return store => {
@@ -54,7 +55,9 @@ export default function createPersistedState({
     }
 
     subscriber(store)((mutation, state) => {
-      setState(key, reducer(state, paths), storage)
+      if (filter(mutation)) {
+        setState(key, reducer(state, paths), storage)
+      }
     })
   }
 }

test/plugin.js

@@ -135,3 +135,23 @@ test('uses the configured reducer when persisting the state', t => {
 
   t.true(customReducer.calledWith({ custom: 'value' }, ['custom']))
 })
+
+test('filters to specific mutations', t => {
+  window.localStorage.clear()
+
+  const store = new Store({ state: {} })
+  sinon.spy(store, 'replaceState')
+  sinon.spy(store, 'subscribe')
+
+  const plugin = createPersistedState({ filter: mutation => ['filter'].indexOf(mutation) !== -1 })
+  plugin(store)
+
+  const subscriber = store.subscribe.getCall(0).args[0]
+  subscriber('mutation', { changed: 'state' })
+
+  t.is(window.localStorage.getItem('vuex'), null)
+
+  subscriber('filter', { changed: 'state' })
+
+  t.is(window.localStorage.getItem('vuex'), JSON.stringify({changed: 'state'}))
+})