New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

vuex-ltm

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vuex-ltm

Vuex - Long Term Memory: Async modular persistence for Vuex store.


Version published
Maintainers
1
Created

Vuex - Long Term Memory

CircleCI semantic-release Renovate npm dependencies Status devDependencies Status peerDependencies Status

Async modular persistence for Vuex store.

Documentation: https://thomaash.github.io/vuex-ltm/

Simple example

import Vue from "vue"
import Vuex from "vuex"
import {
  LTM,
  dummyFilter,
  localStorageWrapper,
  replace,
  saveAll,
  simplyExecute
} from "vuex-ltm"

const ltm = new LTM({
  // Persist immediatelly (even multiple times per second).
  execute: simplyExecute,
  // Persist all mutations.
  filter: dummyFilter,
  // Replace the state in Vuex when loading.
  merge: replace,
  // Persist the whole state.
  reduce: saveAll,
  // Persist into the localStorage as the 'app-state' item.
  storage: localStorageWrapper("app-state", localStorage)
})

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {},
  plugins: [ltm.plugin]
})

Better example

import Vue from 'vue'
import Vuex from 'vuex'
import {
  LTM,
  chromeSyncStorage,
  deepMerge,
  executeWithDelay,
  localStorage,
  mutationFilter,
  pickModules
} from 'vuex-ltm'

const ltm = new LTM({
  // Persist 2 seconds after the last change (prevents bursts).
  execute: executeWithDelay(2000),
  // Persist only after select mutations.
  filter: mutationFilter(['mutation-type-1', 'mutation-type-2']),
  // Merge the persisted state with the defaults in Vuex.
  merge: deepMerge,
  // Persist only some modules.
  reduce: pickModules(['sync']),
  // Persist into the chrome.storage.sync if in extension or into localStorage otherwise (dev/demo).
  storage: chrome && chrome.storage && chrome.storage.sync
    ? chromeSyncStorage('app-state')
    : localStorage('app-state'),
})

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {},
  modules: {
    local: …,
    sync: …
  },
  plugins: [ltm.plugin]
})

// You can also wait for the persisted state to be loaded (preferably with some nice spinner or something).
// Otherwise you'll have the defaults in Vuex before the persisted state is loaded.
;(async () => {
  await ltm.ready
  new Vue({
    store,
    render: h => h(App)
  }).$mount('#app')
})()

License

This project is dual licensed under Apache 2.0 and ISC. Pick whichever you like more.

FAQs

Package last updated on 19 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts