Silksofthesoul / vuex-masked-modules

Plugin for working with Vuex. Allows to use localeStorage to store state. It is possible to "mask" data in the localStorage cell.

vuex-masked-modules

Plugin for working with Vuex. Allows you to select the type of storage, localStorage or sessionStorage for storing state. It is possible to "mask" data in the storage cell.

The plugin uses one storage key in which it stores masked data. DO NOT USE FOR STORING CONFIDENTIAL DATA. Just a masking.

Encryption keys are generated automatically, you cannot set the keys yourself. Perhaps it will be implemented in the next versions. Or maybe not.

How to use in project

Install package: npm i -s vuex-masked-modules

Or copy files from GitHub https://github.com/Silksofthesoul/vuex-masked-modules

Example usage in project:

import { MaskedVuex, maskedVuex } from 'vuex-masked-modules';

export const storageName = 'app'; // key in localStorage
export const namespace = 'ModuleName'; // key in store, module name
export const isEncrypt = true; // encrypt (masked) data or not
export const isMaskedKey = true; // masked key in store or not
export const isInitLog = true; // show store object in console
export const storageType = 'sessionStorage'; // select type store. 'localStorage' (default) or 'sessionStorage'
export const isFlush = false; // flush store

// middlewares functions
export const middlewares = [
  ({type, payload}) => console.log(type, payload),
];

// data template (state)
export const template = {
  arr: [2, 4, 6],
  isVisible: false
};

export const settings = {
  storageName,
  namespace,
  isEncrypt,
  isMaskedKey,
  isInitLog,
  isFlush,
  middlewares,
  storageType,
  template,
};

const state = new MaskedVuex({ ...settings });

export const plugin = ({namespace}) => maskedVuex({ ...settings, namespace });

export default {
  namespaced: true,
  mutations: {
    show(state) { state.isVisible = true; },
    hide(state) { state.isVisible = false; }
  },
  getters: {
    test(state) { return state.arr.map(item => item * 2); }
  },
  namespace,
  state,
  plugin
};

Examples

See examples

You can inspect your localStorage or sessionStorage after running the test application.

Test

Run npm test

Contribution

I will be glad if you inform me about bugs, wishes, or make a Pull Request. Feel free.