Path: Use lodash get and set for find and set storage properties

README.md

@@ -29,10 +29,10 @@ How to store multiple stores on storage and rename storage store
 module.exports = {
   modules: [
     ['nuxt-vuex-localstorage', {
+      prefix: 're_', // prefix name in localStorage and sessionStorage
       localStorage: [
         {
-            name: 'profile', // name module
-            prop: 'data', // option, prop in module, default: undefined
+            path: 'tab.set', // Path to state in storage (use function https://lodash.com/docs/4.17.15#get)
             tabSync: false, // Sync between tabs, default: true
             version: 1.2, // option, Version Control, default: undefined
             expire: 1, // option, 1 = 1 hour, 12 = 12 hours, default: undefined

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-vuex-localstorage",
-  "version": "1.2.6",
+  "version": "1.3",
   "description": "Nuxt.js localstorage with vuex store! and polyfill",
   "main": "index.js",
   "scripts": {
@@ -28,6 +28,7 @@
   },
   "homepage": "https://github.com/rubystarashe/nuxt-vuex-localstorage#readme",
   "dependencies": {
-    "axios": "^0.18.0"
+    "axios": "^0.18.0",
+    "lodash": "^4.17.15"
   }
 }

plugins/bindStorage/index.js

@@ -1,6 +1,7 @@
 import Crypto from 'nuxt-vuex-localstorage/plugins/crypto'
 import expire from 'nuxt-vuex-localstorage/plugins/bindStorage/expire'
 import Vue from 'vue'
+import {get as getData, set as setData} from 'lodash'
 
 const storageFunction = (() => {
   try {
@@ -22,39 +23,18 @@ const storageFunction = (() => {
 export default async (ctx, options) => {
   const store         = ctx.store
   const crypto        = await new Crypto(ctx, options)
+  const prefix        = options.prefix || ''
   let localStoreNames = options.localStorage || []
   if (typeof options.localStorage === 'string') localStoreNames = [options.localStorage]
   let sessionStoreNames = options.sessionStorage || []
   if (typeof options.sessionStorage === 'string') sessionStoreNames = [options.sessionStorage]
 
-  const getModuleName = module => module.prop? `${module.name}/${module.prop}`: `${module.name}`;
+  const getModuleName = module => `${prefix}${module.path}`;
 
   const getStorageObject = () => ({
     value: null
   })
 
-  const getData = (data, module) => {
-    try {
-      if(module.prop)
-        return data[module.name][module.prop]
-      else
-        return data[module.name]
-    } catch (e) {
-    }
-    return {};
-  }
-
-  const setData = (data, module, value) => {
-    try {
-      if(module.prop)
-        return data[module.name][module.prop] = value
-      else
-        return data[module.name] = value
-    } catch (e) {
-    }
-    return {};
-  }
-
   const getCopyStore = () => {
     return JSON.parse(JSON.stringify(store.state))
   }
@@ -71,7 +51,7 @@ export default async (ctx, options) => {
   let watchHandlers_local = []
   const watcher_local     = (module, i) => {
     return store.watch(state => {
-        return getData(state, module)
+        return getData(state, module.path)
       },
       val => watchFunction_local(i, val),
       {deep: true})
@@ -81,8 +61,8 @@ export default async (ctx, options) => {
     const localPersist  = JSON.parse(crypto.decrypt(storageFunction.local.get(getModuleName(module))))
     let data            = getCopyStore()
     const expireChecked = expire.check(localPersist)
-    if (expireChecked && getData(store.state, module) && expireChecked.version === module.version)
-      setData(data, module, Object.assign({}, getData(data, module), expireChecked.value))
+    if (expireChecked && getData(store.state, module.path) !== undefined && expireChecked.version === module.version)
+      setData(data, module.path, expireChecked.value)
     store.replaceState(data)
 
     localStoreNames.forEach((module, i) => {
@@ -92,18 +72,19 @@ export default async (ctx, options) => {
 
   const watchOtherBrowsersStorage = () => {
     window.addEventListener('storage', (event) => {
-      if(!event) return false
-      const [name, prop] = event.key.split('/', 2);
+      if(!event && event.key.indexOf(prefix) !== 0) return false;
+      const path = prefix.length? event.key.slice(prefix.length): event.key;
       const module = localStoreNames.find((e) => {
-        return e.name === name && (!prop || e.prop === prop)
+        return e.path === path
+      }) || sessionStoreNames.find((e) => {
+        return e.path === path
       });
-      if (module && getData(store.state, module) && module.tabSync !== false ) {
-        console.group('addEventListener(storage)')
+
+      if (module && getData(store.state, module.path) !== undefined && module.tabSync !== false ) {
         let data = getCopyStore()
-        setData(data, module, expire.check(JSON.parse(crypto.decrypt(event.newValue))).value)
+        setData(data, module.path, expire.check(JSON.parse(crypto.decrypt(event.newValue))).value)
         if (JSON.stringify(data) !== JSON.stringify(store.state))
           store.replaceState(data)
-        console.groupEnd()
       }
     })
   }
@@ -120,7 +101,7 @@ export default async (ctx, options) => {
   let watchHandlers_session = []
   const watcher_session     = (module, i) => {
     return store.watch(state => {
-        return getData(state, module)
+        return getData(state, module.path)
       },
       val => watchFunction_session(i, val),
       {deep: true})
@@ -130,8 +111,8 @@ export default async (ctx, options) => {
     const sessionPersist = JSON.parse(crypto.decrypt(storageFunction.session.get(getModuleName(module))))
     let data             = getCopyStore()
     const expireChecked  = expire.check(sessionPersist)
-    if (expireChecked && getData(store.state, module) && expireChecked.version === module.version)
-      setData(data, module, Object.assign({}, getData(data, module), expireChecked.value))
+    if (expireChecked && getData(store.state, module.path) !== undefined && expireChecked.version === module.version)
+      setData(data, module.path, expireChecked.value)
     store.replaceState(data)
 
     sessionStoreNames.forEach((module, i) => {
@@ -146,7 +127,7 @@ export default async (ctx, options) => {
       let localStorageStatusWatchers  = []
       localStoreNames.forEach((module, i) => {
         localStorageStatusWatchers.push(store.watch(state => {
-          return getData(state, module).___status
+          return getData(state, module.path).___status
         }, val => {
           if (val) {
             bindLocalStorage(module)