build 1.0.0

Author: crossjs

README.md

@@ -1,77 +1,32 @@
 # VUEX-LOCALSTORAGE
 
-> :dvd: Manage data with expires by localStorage or some else storage.
+> :dvd: Persist Vuex state with expires by localStorage or some else storage.
 
 [![Travis](https://img.shields.io/travis/crossjs/vuex-localstorage.svg?style=flat-square)](https://travis-ci.org/crossjs/vuex-localstorage)
 [![Coveralls](https://img.shields.io/coveralls/crossjs/vuex-localstorage.svg?style=flat-square)](https://coveralls.io/github/crossjs/vuex-localstorage)
 [![dependencies](https://david-dm.org/crossjs/vuex-localstorage.svg?style=flat-square)](https://david-dm.org/crossjs/vuex-localstorage)
 [![devDependency Status](https://david-dm.org/crossjs/vuex-localstorage/dev-status.svg?style=flat-square)](https://david-dm.org/crossjs/vuex-localstorage?type=dev)
 [![NPM version](https://img.shields.io/npm/v/vuex-localstorage.svg?style=flat-square)](https://npmjs.org/package/vuex-localstorage)
 
-## Notice
-
-It's NOT a Vuex plugin.
-
-If you are looking for a Vuex plugin, see: https://github.com/robinvdvleuten/vuex-persistedstate
-
-Here is a example for using them together:
+## Usage
 
 ``` js
 import { Store } from 'vuex'
-import createPersistedState from 'vuex-persistedstate'
-import createStorage from 'vuex-localstorage'
-
-const storage = createStorage('namespace-for-state', {
-  // initial state
-}, {
-  // ONE_WEEK
-  expires: 7 * 24 * 60 * 60 * 1e3
-})
+import createPersist, { createStorage } from 'vuex-localstorage'
 
 new Store({
-  plugins: [createPersistedState({
-    getState: storage.get,
-    setState: storage.set
+  plugins: [createPersist({
+    namespace: 'namespace-for-state'
+    initialState: {},
+    // ONE_WEEK
+    expires: 7 * 24 * 60 * 60 * 1e3
   })]
 }
 ```
 
-[Live Example at PLATO](https://github.com/crossjs/plato/blob/master/src/modules/persist/index.js)
-
-## Usage
-
-With default key
-
-``` js
-const persist = createPersist()
-persist.set({ foo: 'bar' }) // equals to persist.set('default', { foo: 'bar' })
-persist.get() // equals to persist.get('default'), return { foo: 'bar' }
-```
+[Live Example at PLATO](https://github.com/platojs/plato/blob/master/src/modules/persist/index.js)
 
-With customize keys
-
-``` js
-const persist = createPersist('my-namespace', { foo: { baz: 'bar' } })
-persist.get() // return { foo: { baz: 'bar' } }
-persist.get('foo') // return { baz: 'bar' }
-persist.set('foo', { baz: 'baz' }) // should NOT override initialState
-persist.get() // return { foo: { baz: 'bar' } }
-persist.get('foo') // return { baz: 'baz' }
-```
-
-### Options
-
-``` js
-/**
- * createPersist
- * @param  {String} [namespace]     命名空间
- * @param  {Object} [initialState]  初始值/默认值
- * @param  {Object} [config]        配置 provider/serialize/deserialize/expires
- * @return {Object}                 带 get/set 方法的对象
- */
-```
-
-### Development Setup
+## Development Setup
 
 ``` bash
 # install deps
@@ -87,6 +42,10 @@ npm test
 npm run unit
 ```
 
+## Special Thanks
+
+[vuex-persistedstate](https://github.com/robinvdvleuten/vuex-persistedstate)
+
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuex-localstorage",
   "version": "0.5.0",
-  "description": ":dvd: Sync Vuex modules state to localStorage or some else storage.",
+  "description": ":dvd: Persist Vuex state with expires by localStorage or some else storage.",
   "main": "dist/index.js",
   "jsnext:main": "src/index.js",
   "scripts": {
@@ -18,6 +18,7 @@
     "url": "git+https://github.com/crossjs/vuex-localstorage.git"
   },
   "keywords": [
+    "expires",
     "localstorage",
     "persist",
     "vuex"
@@ -54,7 +55,11 @@
     "phantomjs-prebuilt": "^2.1.13",
     "rollup": "^0.36.3",
     "rollup-plugin-buble": "^0.14.0",
+    "sinon": "^1.17.7",
+    "sinon-chai": "^2.8.0",
     "uglify-js": "^2.7.4",
+    "vue": "^2.1.10",
+    "vuex": "^2.1.2",
     "webpack": "^1.13.3",
     "yargs": "^6.3.0"
   }

src/index.js

@@ -1,30 +1,24 @@
+let index = Date.now()
+
 /**
- * createPersist
+ * createStorage
  *
  * @param  {String} namespace       namespace
  * @param  {Object} [initialState]  初始值/默认值
  * @param  {Object} [config]         自定义 provider/serialize/deserialize/expires
  * @return {Object}                 get/set 方法
  */
-export default function (namespace, initialState = {}, config) {
-  const {
-    provider,
-    serialize,
-    deserialize,
-    merge,
-    expires
-  } = Object.assign({
-    provider: localStorage,
-    serialize: JSON.stringify,
-    deserialize: JSON.parse,
-    merge (initialState, persistedState) {
-      return Object.assign({}, initialState, persistedState)
-    },
-    expires: 0 // never expires
-  }, config)
-
+export function createStorage ({
+  namespace,
+  initialState = {},
+  provider = localStorage,
+  serialize = JSON.stringify,
+  deserialize = JSON.parse,
+  expires = 0, // never expires
+  merge = defaultMerge
+} = {}) {
   if (!namespace) {
-    namespace = rnd()
+    namespace = `vuex-${++index}`
   }
 
   return {
@@ -73,6 +67,49 @@ export default function (namespace, initialState = {}, config) {
   }
 }
 
-export function rnd () {
-  return Date.now().toString(32) + Math.random().toString(32).slice(2)
+export default function createPersist ({
+  namespace,
+  initialState,
+  provider,
+  serialize,
+  deserialize,
+  expires,
+  merge = defaultMerge,
+  reducer = defaultReducer,
+  paths = []
+} = {}) {
+  return store => {
+    const storage = createStorage({
+      namespace,
+      initialState,
+      provider,
+      serialize,
+      deserialize,
+      merge,
+      expires
+    })
+
+    store.replaceState(
+      merge(store.state, storage.get())
+    )
+
+    store.subscribe((mutation, state) => {
+      storage.set(reducer(state, paths))
+    })
+  }
+}
+
+function defaultMerge (...args) {
+  return Object.assign({}, ...args)
+}
+
+function defaultReducer (state, paths) {
+  return paths.length === 0
+  ? state
+  : paths.reduce((substate, path) => {
+    if (state.hasOwnProperty(path)) {
+      return Object.assign(substate, { [path]: state[path] })
+    }
+    return substate
+  }, {})
 }

test/unit/.eslintrc

@@ -4,9 +4,8 @@
     "mocha": true
   },
   "globals": {
-    "chai": false,
+    "sinon": false,
     "assert": false,
-    "expect": false,
-    "should": false
+    "expect": false
   }
 }

test/unit/index.js

@@ -2,11 +2,14 @@
 // Test Environment Setup
 // ---------------------------------------
 import chai from 'chai'
+import sinonChai from 'sinon-chai'
+
+localStorage.clear()
+
+chai.use(sinonChai)
 
-global.chai = chai
 global.assert = chai.assert
 global.expect = chai.expect
-global.should = chai.should()
 
 // ---------------------------------------
 // Require Tests

test/unit/karma.conf.js

@@ -7,6 +7,7 @@ const karmaConfig = {
   basePath: '../../', // project root in relation to bin/karma.js
   files: [
     './node_modules/phantomjs-polyfill/bind-polyfill.js',
+    './node_modules/sinon/pkg/sinon.js',
     {
       pattern: './test/unit/index.js',
       watched: false,