A Vuex plugin to persist the store. (Fully Typescript enabled)

Related tags

vuex-persist
Overview

vuex-persist

A Typescript-ready Vuex plugin that enables you to save the state of your app to a persisted storage like Cookies or localStorage.

Paypal Donate

Info : GitHub stars npm npm license

Status : Build Status codebeat badge Codacy Badge Code Climate codecov

Sizes : npm:size:gzip umd:min:gzip umd:min:brotli

Table of Contents

Table of contents generated with markdown-toc

Features

  • 📦 NEW in v1.5
    • distributed as esm and cjs both (via module field of package.json)
    • better tree shaking as a result of esm
  • 🎗 NEW IN V1.0.0
    • Support localForage and other Promise based stores
    • Fix late restore of state for localStorage
  • Automatically save store on mutation.
  • Choose which mutations trigger store save, and which don't, using filter function
  • Works perfectly with modules in store
  • Ability to save partial store, using a reducer function
  • Automatically restores store when app loads
  • You can create mulitple VuexPersistence instances if you want to -
    • Save some parts of the store to localStorage, some to sessionStorage
    • Trigger saving to localStorage on data download, saving to cookies on authentication result

Compatibility

  • VueJS - v2.0 and above
  • Vuex - v2.1 and above

Installation

Vue CLI Build Setup (using Webpack or some bundler)

npm install --save vuex-persist

or

yarn add vuex-persist

Transpile for target: es5

This module is distributed in 3 formats

  • umd build /dist/umd/index.js in es5 format
  • commonjs build /dist/cjs/index.js in es2015 format
  • esm build /dist/esm/index.js in es2015 format

When using with Webpack (or Vue CLI 3), the esm file gets used by default. If your project has a es6 or es2015 target, you're good, but if for backwards compatibility, you are compiling your project to es5 then this module also needs to be transpiled.

To enable transpilation of this module

// in your vue.config.js
module.exports = {
  /* ... other config ... */
  transpileDependencies: ['vuex-persist']
}

Directly in Browser

<!-- We need lodash.merge so get lodash first -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex-persist"></script>

Tips for NUXT

This is a plugin that works only on the client side. So we'll register it as a ssr-free plugin.

// Inside - nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/vuex-persist', ssr: false }
  ]
}
// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  new VuexPersistence({
  /* your options */
  }).plugin(store);
}

Usage

Steps

Import it

import VuexPersistence from 'vuex-persist'

NOTE: In browsers, you can directly use window.VuexPersistence

Create an object

const vuexLocal = new VuexPersistence({
  storage: window.localStorage
})

// or in Typescript

const vuexLocal = new VuexPersistence<RootState>({
  storage: window.localStorage
})

Use it as Vue plugin. (in typescript)

const store = new Vuex.Store<State>({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
})

(or in Javascript)

const store = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
}

Constructor Parameters -

When creating the VuexPersistence object, we pass an options object of type PersistOptions. Here are the properties, and what they mean -

Property Type Description
key string The key to store the state in the storage
Default: 'vuex'
storage Storage (Web API) localStorage, sessionStorage, localforage or your custom Storage object.
Must implement getItem, setItem, clear etc.
Default: window.localStorage
saveState function
(key, state[, storage])
If not using storage, this custom function handles
saving state to persistence
restoreState function
(key[, storage]) => state
If not using storage, this custom function handles
retrieving state from storage
reducer function
(state) => object
State reducer. reduces state to only those values you want to save.
By default, saves entire state
filter function
(mutation) => boolean
Mutation filter. Look at mutation.type and return true
for only those ones which you want a persistence write to be triggered for.
Default returns true for all mutations
modules string[] List of modules you want to persist. (Do not write your own reducer if you want to use this)
asyncStorage boolean Denotes if the store uses Promises (like localforage) or not (you must set this to true when suing something like localforage)
Default: false
supportCircular boolean Denotes if the state has any circular references to itself (state.x === state)
Default: false

Usage Notes

Reducer

Your reducer should not change the shape of the state.

const persist = new VuexPersistence({
  reducer: (state) => state.products,
  ...
})

Above code is wrong You intend to do this instead

const persist = new VuexPersistence({
  reducer: (state) => ({products: state.products}),
  ...
})

Circular States

If you have circular structures in your state

let x = { a: 10 }
x.x = x
x.x === x.x.x // true
x.x.x.a === x.x.x.x.a //true

JSON.parse() and JSON.stringify() will not work. You'll need to install flatted

npm install flatted

And when constructing the store, add supportCircular flag

new VuexPersistence({
  supportCircular: true,
  ...
})

Examples

Simple

Quick example -

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'

Vue.use(Vuex)

const store = new Vuex.Store<State>({
  state: {
    user: { name: 'Arnav' },
    navigation: { path: '/home' }
  },
  plugins: [new VuexPersistence().plugin]
})

export default store

Detailed

Here is an example store that has 2 modules, user and navigation We are going to save user details into a Cookie (using js-cookie) And, we will save the navigation state into localStorage whenever a new item is added to nav items. So you can use multiple VuexPersistence instances to store different parts of your Vuex store into different storage providers.

Warning: when working with modules these should be registered in the Vuex constructor. When using store.registerModule you risk the (restored) persisted state being overwritten with the default state defined in the module itself.

import Vue from 'vue'
import Vuex, { Payload, Store } from 'vuex'
import VuexPersistence from 'vuex-persist'
import Cookies from 'js-cookie'
import { module as userModule, UserState } from './user'
import navModule, { NavigationState } from './navigation'

export interface State {
  user: UserState
  navigation: NavigationState
}

Vue.use(Vuex)

const vuexCookie = new VuexPersistence<State, Payload>({
  restoreState: (key, storage) => Cookies.getJSON(key),
  saveState: (key, state, storage) =>
    Cookies.set(key, state, {
      expires: 3
    }),
  modules: ['user'], //only save user module
  filter: (mutation) => mutation.type == 'logIn' || mutation.type == 'logOut'
})
const vuexLocal = new VuexPersistence<State, Payload>({
  storage: window.localStorage,
  reducer: (state) => ({ navigation: state.navigation }), //only save navigation module
  filter: (mutation) => mutation.type == 'addNavItem'
})

const store = new Vuex.Store<State>({
  modules: {
    user: userModule,
    navigation: navModule
  },
  plugins: [vuexCookie.plugin, vuexLocal.plugin]
})

export default store

Support Strict Mode

This now supports Vuex strict mode (Keep in mind, NOT to use strict mode in production) In strict mode, we cannot use store.replaceState so instead we use a mutation

You'll need to keep in mind to add the RESTORE_MUTATION to your mutations See example below

To configure with strict mode support -

import Vue from 'vue'
import Vuex, { Payload, Store } from 'vuex'
import VuexPersistence from 'vuex-persist'

const vuexPersist = new VuexPersistence<any, any>({
  strictMode: true, // This **MUST** be set to true
  storage: localStorage,
  reducer: (state) => ({ dog: state.dog }),
  filter: (mutation) => mutation.type === 'dogBark'
})

const store = new Vuex.Store<State>({
  strict: true, // This makes the Vuex store strict
  state: {
    user: {
      name: 'Arnav'
    },
    foo: {
      bar: 'baz'
    }
  },
  mutations: {
    RESTORE_MUTATION: vuexPersist.RESTORE_MUTATION // this mutation **MUST** be named "RESTORE_MUTATION"
  },
  plugins: [vuexPersist.plugin]
})

Some of the most popular ways to persist your store would be -

  • js-cookie to use browser Cookies
  • window.localStorage (remains, across PC reboots, untill you clear browser data)
  • window.sessionStorage (vanishes when you close browser tab)
  • localForage Uses IndexedDB from the browser

Note on LocalForage and async stores

There is Window.Storage API as defined by HTML5 DOM specs, which implements the following -

interface Storage {
  readonly length: number
  clear(): void
  getItem(key: string): string | null
  key(index: number): string | null
  removeItem(key: string): void
  setItem(key: string, data: string): void
  [key: string]: any
  [index: number]: string
}

As you can see it is an entirely synchronous storage. Also note that it saves only string values. Thus objects are stringified and stored.

Now note the representative interface of Local Forage -

export interface LocalForage {
  getItem<T>(key: string): Promise<T>
  setItem<T>(key: string, data: T): Promise<T>
  removeItem(key: string): Promise<void>
  clear(): Promise<void>
  length(): Promise<number>
  key(keyIndex: number): Promise<string>
  _config?: {
    name: string
  }
}

You can note 2 differences here -

  1. All functions are asynchronous with Promises (because WebSQL and IndexedDB are async)
  2. It works on objects too (not just strings)

I have made vuex-persist compatible with both types of storages, but this comes at a slight cost. When using asynchronous (promise-based) storages, your state will not be immediately restored into vuex from localForage. It will go into the event loop and will finish when the JS thread is empty. This can invoke a delay of few seconds.

How to know when async store has been replaced

As noted above, the store is not immediately restored from async stores like localForage. This can have the unfortunate side effect of overwriting mutations to the store that happen before vuex-persist has a chance to do its thing. In strict mode, you can create a plugin to subscribe to RESTORE_MUTATION so that you tell your app to wait until the state has been restored before committing any further mutations. (Issue #15 demonstrates how to write such a plugin.) However, since you should turn strict mode off in production, and since vuex doesn't currently provide any kind of notification when replaceState() has been called, starting with v2.1.0 vuex-persist will add a restored property to the store object to let you know the state has been restored and that it is now safe to commit any mutations that modify the stored state. store.restored will contain the Promise returned by calling the async version of restoreState().

Here's an example of a beforeEach() hook in vuex-router that will cause your app to wait for vuex-persist to restore the state before taking any further actions:

// in src/router.js
import Vue from 'vue'
import Router from 'vue-router'
import { store } from '@/store' // ...or wherever your `vuex` store is defined

Vue.use(Router)

const router = new Router({
  // define your router as you normally would
})

const waitForStorageToBeReady = async (to, from, next) => {
  await store.restored
  next()
}
router.beforeEach(waitForStorageToBeReady)

export default router

Note that on the 2nd and subsequent router requests to your app, the Promise in store.restored should already be in a "resolved" state, so the hook will not force your app to wait for additional calls to restoreState().

Unit Testing

Jest

When testing with Jest, you might find this error -

TypeError: Cannot read property 'getItem' of undefined

This is because there is no localStorage in Jest. You can add the following Jest plugins to solve this https://www.npmjs.com/package/jest-localstorage-mock

Issues
  • Cannot run unit tests

    Cannot run unit tests

    I am attempting to use vue-test-utils and jest to run some unit tests on my vuex actions. I am running into the error below. Any ideas on how I can get this resolved?

     FAIL  test/unit/specs/masternode/Provision.spec.js
      ● Test suite failed to run
    
        TypeError: Cannot read property '_config' of undefined
    
        
          
          at new VuexPersistence (node_modules/vuex-persist/dist/index.js:133:44)
          at Object.<anonymous> (src/store/index.js:60:17)
          at Object.<anonymous> (src/contracts/MNProposedMarket.js:19:14)
          at Object.<anonymous> (src/store/modules/app/actions.js:35:25)
          at Object.<anonymous> (src/store/modules/app/index.js:7:16)
          at Object.<anonymous> (src/store/modules/index.js:7:12)
          at Object.<anonymous> (test/unit/specs/masternode/Provision.spec.js:27:16)
    

    Here is my spec so far:

    describe('AppActions', () => {
      const vuexLocal = new VuexPersist({
        storage: window.localStorage,
        modules: ['app', 'masternode', 'marketplace'],
      })
      let store
    
      beforeEach(() => {
        store = new VuexStore ({
          plugins: [vuexLocal.plugin]
        })
      })
    })
    
    opened by chewy94 18
  • Nuxt page refresh restores state but you can only access it via computed properties.

    Nuxt page refresh restores state but you can only access it via computed properties.

    This plug-in works great but you can't access the restored state in any of the Vue / Nuxt lifecycle hooks or the data object. Using a fresh install of Nuxt in SPA mode.

    The restored state works perfectly only in computed properties using "this.$store.state". if you try to access "this.$store.state" in data(), created(), mounted(), asyncData(), or fetch(), it returns your default blank state object or undefined.

    A fix for this is removing the "window.onNuxtReady" wrapper function. It then allows you to access the restored state in those lifecycle methods.

    Does anyone know why this happens? And if it's production safe to init the plugin without the "window.onNuxtReady" wrapper function?

    Edit: In my case, i needed to set a data property from the store so i figured out another solution, setting a watcher to watch the computed property and then set the data - but now it only works ON reload and not on page navigation :)

    data(){
         return { industry: [] }
        },
        watch: {
          mycomputedProperty(value) {
            this.industry = value
          }
      }
    
    opened by msacchetti 14
  • localForage support

    localForage support

    Hi Arnav, first of all, thank you for releasing vuex-persist. You mention on your readme that localforage is supported. However, new VuexPersistance(storage: localforage}) doesn't work - it surfaces an error related to localforage being asynchronous (VuexPersistance is trying to JSON decode a JS promise). Any tip how to make this work?

    enhancement 
    opened by invernizzi 13
  • Cannot store cyclic object

    Cannot store cyclic object

    I am trying to store a web3.js contract object with vuex-persist, but I get the following error:

    TypeError: cyclic object value
    

    It looks like there are ways to remove/restore cycles from JSON objects. This feels like something that vuex-persist should do automatically.

    bug 
    opened by rossng 13
  • When is the plugin ready to be used?

    When is the plugin ready to be used?

    Loading from localStorage seems immediate when the application starts, but when writing to the vuex store persistence doesn't seem to work until some time has passed.

    If I do this in root component the state in localStorage doesn't change:

    const root = new Vue({
    	el: '#app',
    	router,
    	store,
    	render: (h) => h(App),
    	mounted () {
    		store.commit('persistent/SET_TEST_VAR', true);
    		console.log(store.state.persistent.test_var);
    	}
    });
    

    If I do this instead it works fine:

    setTimeout(() => {
    	store.commit('persistent/SET_TEST_VAR', true);
    	console.log(store.state.persistent.test_var);
    }, 1000);
    
    opened by PierBover 13
  • Transpile esm and cjs formats to es5

    Transpile esm and cjs formats to es5

    Fix #73

    opened by hiendv 11
  • How to clear storage?

    How to clear storage?

    I'm sorry if this is already described somewhere, I can't seem to find it. When my user logs out of the application I want the storage to be cleared. I use window.localStorage.clear(); But when I look in local storage or if I log window.localStorage, I still see my data and it's not cleared.

    opened by panndoraBoo 11
  • store.registerModule overwrites persisted state

    store.registerModule overwrites persisted state

    Consider this example code:

    const store = new Vuex.Store({
      plugins: [createPersistedState(persistedStateOptions)]
    });
    
    import user from './user.js';
    store.registerModule('user', user);
    

    This will load the persisted state from localStorage (or other) and then it will be overwritten by the state defined in the "user" module. I think I understand why this is happening, but a small warning about this in the documentation could come in handy for some people.

    This on the other hand will work fine:

    import user from './user.js';
    
    const store = new Vuex.Store({
      modules: {
        user
      },
      plugins: [createPersistedState(persistedStateOptions)]
    });
    

    I can use the latter in my project, but I started out with the first implementation and spent some time finding out what prevented the persisted state from being restored.

    opened by robbeman 10
  • Reactivity removed on refresh

    Reactivity removed on refresh

    I am having trouble with my store elements not continuing to be reactive after refreshing the page. My state to start is empty such that:

    const state = {
      items: [],
    };
    

    I then am using axios to get information from an API and then pushing objects into this array. Below is my mutation:

    loadData(state, response) {
        response.items.forEach(function(item) {
          state.items.push(item);
        });
        // Vue.set(state, 'items', response.items);
      },
    

    When I inspect this property in the console, I can see that the reactive getters and setters are added onto these objects within the array. However, when I refresh the page and inspect these objects, the array is reactive but the actual objects are not.

    How can I fix this without having to manually go through and fix this on every single module? (I tried to do a global Vue.set() on the state, but that didn't fix it either.)

    bug help wanted 
    opened by fdabek1 9
  • No longer works in Internet Explorer with default config

    No longer works in Internet Explorer with default config

    After upgrading to 2.1.0 app started failing with the following error:

    Unable to get property 'toLowerCase' of undefined or null reference
    

    It happens to fail where vuex-persist tries to determine storageConstructor value. This change was introduced quite recently in #136 (fixing #97). Code relies on the fact that constructor.name is always defined, however it's not the case for Internet Explorer. Described here: https://stackoverflow.com/questions/25140723/constructor-name-is-undefined-in-internet-explorer

    Also vuex-persist is added to transpileDependencies.

    I would like to provide a PR, though not sure how to deal with that issue. Will check for name not being falsy be enough?

    IE: 11.55.17763.0 vuex-persist: 2.1.0

    opened by romansp 9
  • Fix this.mergeOption being null in RESTORE_MUTATION in strictmode

    Fix this.mergeOption being null in RESTORE_MUTATION in strictmode

    Fix for issue #213, where I think the issue is explained best, but I'll give it my own try below

    RESTORE_MUTATION function contains a reference to this.mergeOption, but this seems to be for a different context, causing mergeOption to always be null when using the RESTORE_MUTATION

    This creates an issue when restoring arrays from localStorage. Deepmerge defaults to a merge behaviour when merging arrays, but vuex-persist defaults to 'replaceArrays', which ends up not being respected as mergeOption is null, so Deepmerge reverts to it's default of merging arrays.

    I've put together an example of the issue in action here

    Thanks

    opened by oscarchilds 0
  • Fix typo

    Fix typo

    null

    opened by Vikaash02 0
  • Property 'restored' does not exist on type 'Store<State>'

    Property 'restored' does not exist on type 'Store'

    Typescript gives me the error "Property 'restored' does not exist on type 'Store'." I am trying to use the router guard example shown in the docs, along with async storage.

    As a workaround, I defined a type named RestorableAsyncStore that extends Store to include the property restored: Promise<any> and then did await (store as RestorableAsyncStore)?.restored.

    Any ideas?

    opened by DarrylNoakes 0
  • Declare filter parameter as MutationPayload

    Declare filter parameter as MutationPayload

    It's useful to filter out mutation based on payload

    opened by Glandos 0
  • Vue 3 & Vuex 4 compatibility?

    Vue 3 & Vuex 4 compatibility?

    Hello there!
    We are using vuex-persist in our application and are currently migrating to Vue 3 and Vuex 4. Are there any plans on adding support for Vue 3 and Vuex 4?

    I tried to add the support on my own, but ran into issues:

    • Localforage throws an error Uncaught (in promise) DOMException: Failed to execute 'put' on 'IDBObjectStore': [object Array] could not be cloned.
      • Workaround using the reducer function worked, but after each hard refresh (F5) the app didn't notice that the store data was there
    opened by dfun90 2
  • How to use one store file not all my vuex stores

    How to use one store file not all my vuex stores

    Screenshot (495) i only want to locally save on of my store files.. see screen shot its in nuxt i have the one i wish to use set as namespaced true then added modules: {carematching}, to the vuex-persist.js file and get nothing....

    opened by JamieGarcia123 3
  • Causes issues with the beta Vue DevTools

    Causes issues with the beta Vue DevTools

    Hiya,

    Just a note that I experienced using the beta Vue DevTools when using this plugin. The DevTools appear to get stuck just showing the initial values.

    See some comments over in https://github.com/vuejs/devtools/issues/1456

    Cheers

    opened by rowanwins 1
  • Store works when using

    Store works when using "window.localStorage" but not when using "localForage".. any pointers would be appreciated

    Hi All, New to "vuex-persist" mainly been using another persist package, and started having issues with exceeding storage size. Data is around 6mb, but looks like LocalStore is limited to less than ~5Mb.

    So thought I would take a look into using "vuex-persist" and IndexedDB (via localForage).

    As such, I have configured my store as follows:

    import {createLogger, createStore} from 'vuex'
    import VuexPersist from 'vuex-persist'
    import localForage from 'localforage'
    
    // Store Modules
    import settings from '@/store/modules/settings'
    import data from '@/store/modules/data'
    
    const debug = process.env.NODE_ENV !== 'production'
    
    // Create the Persistence Store
    const vuexStorage = new VuexPersist({
        key: 'data',
        storage: window.localStorage,
    })
    
    // Export the store
    export default createStore({
        modules: { settings, data },
        strict: debug,
        plugins: debug ? [createLogger(), vuexStorage.plugin] : [vuexStorage.plugin],
    })
    

    When run the above, all works as expected, I can see the localStore "data" key created with content, and when refreshing the page, everything loads as expected.

    However, if I change to "localForage", nothing shows up in the "IndexedDB" Browser and when page is refreshed all data is lost.

    const vuexStorage = new VuexPersist({
        key: 'data',
        storage: localForage,
        modules: [ 'settings' , 'data' ],
        asyncStorage: true,
    })
    

    PS: I do find I am getting the following on both Firefox and Chrome:

    Uncaught (in promise) DOMException: Failed to execute 'put' on 'IDBObjectStore': [object Array] could not be cloned.
    

    Which is weird, as all the data is a bunch of large arrays, and localStore saves perfectly.

    Any suggestions or pointers would be really appreciated.

    Many thanks in advance.

    Package Versions:

    "vue": "^3.0.11",
    "vuex": "^4.0.1",
    "localforage": "^1.9.0",
    "vuex-persist": "^3.1.3"
    
    opened by wattsie 1
  • Readme typo

    Readme typo

    opened by peteruithoven 0
Owner
Arnav Gupta
Co-Founder @coding-blocks 💼 ➕ Android & NodeJS mentor 👨🏻‍🏫 ➕ Ex- @AOKP @fossasia ⚙️ ◀️ in another universe ▶️ Android dev @Zomato as @arnavzoman 🍔
Arnav Gupta
💾 Persist and rehydrate your Vuex state between page reloads.

vuex-persistedstate Persist and rehydrate your Vuex state between page reloads. Install npm install --save vuex-persistedstate The UMD build is also a

Robin van der Vleuten 5.5k Oct 12, 2021
Use a JSONAPI api with a Vuex store, with data restructuring/normalization.

jsonapi-vuex A module to access JSONAPI data from an API, using a Vuex store, restructured to make life easier. Vue 3 - v5 and later supports only Vue

Matthew Richardson 139 Oct 12, 2021
cache vuex action when dispatch

vuex-cache Cache dispatched actions and prevent repeated requests and heavy actions. Compatibility Map and Promise are required (you can use polyfills

superwf 502 Oct 16, 2021
Vuex binding for client-side search with indexers and Web Workers :green_book::mag:

Vuex Search is a plugin for searching collections of objects. Search algorithms powered by js-worker-search. See working example here. Installation: n

Albert Lucianto 152 Aug 31, 2021
The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.

Vuex ORM ?? HEADS UP! Currently, Vuex ORM Next project is on going, and we are hoping it is going to be the foundation of the version 1.0.0 release. W

Vuex ORM 2.3k Oct 16, 2021
Lightweight Vue 3 composition API-compatible store pattern library with built-in undo/redo functionality.

vue-store Lightweight Vue 3 composition API-compatible store pattern library. Offers a simple alternative that is on par with VueX in terms of feature

Korijn van Golen 16 Sep 4, 2021
A util package to use Vuex with Composition API easily.

vuex-composition-helpers A util package to use Vuex with Composition API easily. Installation $ npm install vuex-composition-helpers This library is n

Greenpress 210 Oct 18, 2021
Use paginated resources in your Vue/Vuex app with ease

vuex-pagination Note: This library only works with Vue 2. For Vue 3, take a look at vue-use-pagination. Library that makes it magnitudes easier to int

cyon GmbH 104 Oct 18, 2021
💾🔗🖥️ Share, synchronize and persist state between multiple tabs with this plugin for Vuex. TypeScript types included.

vuex-multi-tab-state This Vuex plugin allows you to sync and share the status of your Vue application across multiple tabs or windows using the local

Gabriel Martín Blázquez 120 Oct 11, 2021
Vuex state persistance and synchronization between tabs/windows.

vuex-basement Vuex state persistance and synchronization between tabs/windows. Tested to work with Vue2. One Shortcomming (please read before use). Th

Rashad Saleh 66 May 31, 2021
Vuex plugin for redux-saga

vuex-coolstory Use redux-saga with Vuex. Overview redux-saga is an awesome library that aims to make side effects (i.e. asynchronous things like data

Nikita Lvov 21 May 17, 2021
Binding Solutions for Vue & Redux

vuedeux Full Documentation https://vueduex.gitbooks.io/vuedeux-documentation/content/ Synopsis Vuedeux is a lightweight open-source utility layer for

null 72 Oct 1, 2021
Universal Model for Vue

Universal Model for Vue Universal model is a model which can be used with any of following UI frameworks: Angular 2+ universal-model-angular React 16.

Universal Model 24 Sep 22, 2021
Vuex state synchronization between iframe/window

vuex-iframe-sync English | 中文 Vuex state synchronization between iframe/window Your star is the greatest encouragement to me. ✨ Features: support ifra

Jiahui.Liang 97 Sep 23, 2021
Simple, unopinionated, lightweight and extensible state management for Vue 3

Simple, unopinionated, lightweight and extensible state management for Vue 3

Andrew Courtice 254 Oct 15, 2021
Local state management within Vuex

vuex-local Local state management within Vuex Why? Global state management is one of the problems on huge application development. Developers address

Katashin 64 Mar 26, 2021
vuex plugin

vuex-local-state inject localStorage to vuex Installation $ npm install vuex-local-state --save API new VuexLocalState(storeOptions, [conf]); conf def

imconfig 18 Jul 30, 2020
Share vuex mutations between tabs/windows

vuex-shared-mutations Share certain Vuex mutations across multiple tabs/windows. Basic example Nuxt example Installation $ npm install vuex-shared-mut

Illya Klymov 548 Oct 6, 2021
Easily share reactive data between your Vue components.

vue-stash A Vue.js plugin that makes it easy to share reactive data between components. This plugin is best suited for the rapid development of protot

Cody Mercer 413 Sep 26, 2021