diff --git a/README.md b/README.md index 997809e..d328eaf 100644 --- a/README.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 44d58ca..43fdb2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nuxt-vuex-localstorage", - "version": "1.0.5", + "version": "1.2.6", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -34,6 +34,11 @@ "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" }, + "lodash": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", diff --git a/package.json b/package.json index 180aaf0..14160fe 100644 --- a/package.json +++ b/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" } } diff --git a/plugins/bindStorage/index.js b/plugins/bindStorage/index.js index bd1f3b9..5477046 100644 --- a/plugins/bindStorage/index.js +++ b/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)