๐Ÿ’พ Persist and rehydrate your Vuex state between page reloads.

Overview

vuex-persistedstate

Persist and rehydrate your Vuex state between page reloads.


Build Status NPM version NPM downloads Prettier MIT license

PRs Welcome Code Of Conduct

Sponsored by The Webstronauts

Install

npm install --save vuex-persistedstate

The UMD build is also available on unpkg:

<script src="https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js"></script>

You can find the library on window.createPersistedState.

Usage

vuex-persistedstate 3.x (for Vuex 3 and Vue 2)

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
});

vuex-persistedstate 4.x (for Vuex 4 and Vue 3)

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});

Examples

Check out a basic example on CodeSandbox.

Edit vuex-persistedstate

Or configured to use with js-cookie.

Edit vuex-persistedstate with js-cookie

Or configured to use with secure-ls

Edit vuex-persistedstate with secure-ls (encrypted data)

Example with Vuex modules

New plugin instances can be created in separate files, but must be imported and added to plugins object in the main Vuex file.

/* module.js */
export const dataStore = {
  state: {
    data: []
  }
}

/* store.js */
import { dataStore } from './module'

const dataState = createPersistedState({
  paths: ['data']
})

export new Vuex.Store({
  modules: {
    dataStore
  },
  plugins: [dataState]
})

Example with Nuxt.js

It is possible to use vuex-persistedstate with Nuxt.js. It must be included as a NuxtJS plugin:

With local storage (client-side only)

// nuxt.config.js

...
/*
 * Naming your plugin 'xxx.client.js' will make it execute only on the client-side.
 * https://nuxtjs.org/guide/plugins/#name-conventional-plugin
 */
plugins: [{ src: '~/plugins/persistedState.client.js' }]
...
// ~/plugins/persistedState.client.js

import createPersistedState from 'vuex-persistedstate'

export default ({store}) => {
  createPersistedState({
    key: 'yourkey',
    paths: [...]
    ...
  })(store)
}

Using cookies (universal client + server-side)

Add cookie and js-cookie:

npm install --save cookie js-cookie or yarn add cookie js-cookie

// nuxt.config.js
...
plugins: [{ src: '~/plugins/persistedState.js'}]
...
// ~/plugins/persistedState.js

import createPersistedState from 'vuex-persistedstate';
import * as Cookies from 'js-cookie';
import cookie from 'cookie';

export default ({ store, req }) => {
    createPersistedState({
        paths: [...],
        storage: {
            getItem: (key) => {
                // See https://nuxtjs.org/guide/plugins/#using-process-flags
                if (process.server) {
                    const parsedCookies = cookie.parse(req.headers.cookie);
                    return parsedCookies[key];
                } else {
                    return Cookies.get(key);
                }
            },
            // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
            setItem: (key, value) =>
                Cookies.set(key, value, { expires: 365, secure: false }),
            removeItem: key => Cookies.remove(key)
        }
    })(store);
};

API

createPersistedState([options])

Creates a new instance of the plugin with the given options. The following options can be provided to configure the plugin for your specific needs:

  • key <String>: The key to store the persisted state under. Defaults to vuex.

  • paths <Array>: An array of any paths to partially persist the state. If no paths are given, the complete state is persisted. If an empty array is given, no state is persisted. Paths must be specified using dot notation. If using modules, include the module name. eg: "auth.user" Defaults to undefined.

  • reducer <Function>: A function that will be called to reduce the state to persist based on the given paths. Defaults to include the values.

  • subscriber <Function>: A function called to setup mutation subscription. Defaults to store => handler => store.subscribe(handler).

  • storage <Object>: Instead of (or in combination with) getState and setState. Defaults to localStorage.

  • getState <Function>: A function that will be called to rehydrate a previously persisted state. Defaults to using storage.

  • setState <Function>: A function that will be called to persist the given state. Defaults to using storage.

  • filter <Function>: A function that will be called to filter any mutations which will trigger setState on storage eventually. Defaults to () => true.

  • overwrite <Boolean>: When rehydrating, whether to overwrite the existing state with the output from getState directly, instead of merging the two objects with deepmerge. Defaults to false.

  • arrayMerger <Function>: A function for merging arrays when rehydrating state. Defaults to function (store, saved) { return saved } (saved state replaces supplied state).

  • rehydrated <Function>: A function that will be called when the rehydration is finished. Useful when you are using Nuxt.js, which the rehydration of the persisted state happens asynchronously. Defaults to store => {}

  • fetchBeforeUse <Boolean>: A boolean indicating if the state should be fetched from storage before the plugin is used. Defaults to false.

  • assertStorage <Function>: An overridable function to ensure storage is available, fired on plugins's initialization. Default one is performing a Write-Delete operation on the given Storage instance. Note, default behaviour could throw an error (like DOMException: QuotaExceededError).

Customize Storage

If it's not ideal to have the state of the Vuex store inside localstorage. One can easily implement the functionality to use cookies for that (or any other you can think of);

Edit vuex-persistedstate with js-cookie

import { Store } from "vuex";
import createPersistedState from "vuex-persistedstate";
import * as Cookies from "js-cookie";

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => Cookies.get(key),
        // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
        setItem: (key, value) =>
          Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: (key) => Cookies.remove(key),
      },
    }),
  ],
});

In fact, any object following the Storage protocol (getItem, setItem, removeItem, etc) could be passed:

createPersistedState({ storage: window.sessionStorage });

This is especially useful when you are using this plugin in combination with server-side rendering, where one could pass an instance of dom-storage.

๐Ÿ” Encrypted Local Storage

If you need to use Local Storage (or you want to) but needs to protect the content of the data, you can encrypt it.

Edit vuex-persistedstate with secure-ls (encrypted data)

import { Store } from "vuex";
import createPersistedState from "vuex-persistedstate";
import SecureLS from "secure-ls";
var ls = new SecureLS({ isCompression: false });

// https://github.com/softvar/secure-ls

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: (key) => ls.get(key),
        setItem: (key, value) => ls.set(key, value),
        removeItem: (key) => ls.remove(key),
      },
    }),
  ],
});

โš ๏ธ LocalForage โš ๏ธ

As it maybe seems at first sight, it's not possible to pass a LocalForage instance as storage property. This is due the fact that all getters and setters must be synchronous and LocalForage's methods are asynchronous.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributors โœจ

Thanks goes to these wonderful people (emoji key):


Robin van der Vleuten

๐Ÿ’ป ๐Ÿ“– ๐Ÿš‡ โš ๏ธ

Sebastian

๐Ÿ’ป ๐Ÿ“–

Boris Graeff

๐Ÿ’ป

Cรญcero Pablo

๐Ÿ“–

Gurpreet Atwal

โš ๏ธ

Jakub Koralewski

๐Ÿ’ป

Jankees van Woezik

๐Ÿ“–

Jofferson Ramirez Tiquez

๐Ÿ“–

Jordan Deprez

๐Ÿ“–

Juan Villegas

๐Ÿ“–

Jรผrg Rast

๐Ÿ’ป

Kartashov Alexey

๐Ÿ’ป

Leonard Pauli

๐Ÿ’ป ๐Ÿ“–

Nelson Liu

๐Ÿ’ป ๐Ÿ“– โš ๏ธ

Nico

๐Ÿ’ป โš ๏ธ

Quentin Dreyer

๐Ÿ’ป

Raphael Saunier

๐Ÿ’ป

Rodney Rehm

๐Ÿ’ป โš ๏ธ

Ryan Wang

๐Ÿ’ป ๐Ÿ“– โš ๏ธ

Sรฉbastien Chopin

๐Ÿ“–

jeffjing

๐Ÿ’ป

macarthuror

๐Ÿ“–

Paul Melero

๐Ÿ“– ๐Ÿ’ป โš ๏ธ

Guillaume da Silva

๐Ÿ’ป

Jonathan Santerre

๐Ÿ’ป

Fรกbio Santos

๐Ÿ“–

robertgr991

๐Ÿ’ป

JurijsKolesnikovs

๐Ÿ“–

David Bond

๐Ÿ“–

Freek van Rijt

๐Ÿ“–

Ilyes Hermellin

๐Ÿ’ป

Peter Siska

๐Ÿ“–

Dmitry Filippov

๐Ÿ“–

Thomas Meitz

๐Ÿ“–

This project follows the all-contributors specification. Contributions of any kind welcome!

License

The MIT License (MIT). Please see License File for more information.

Issues
  • vuex-persistedstate with Nuxtjs

    vuex-persistedstate with Nuxtjs

    Is it possible to use vuex-persistedstate with nuxtjs? (with server side rendering on)

    My current store looks like this:

    import { Store } from 'vuex';
    
    import createPersistedState from 'vuex-persistedstate';
    import * as Cookie from 'js-cookie';
    
    const store = () => new Store({
        state: {
            counter: 0
        },
    
        getters: {
            counter(state) {
                return state.counter;
            }
        },
    
        mutations: {
            increment(state) {
                state.counter++;
            }
        },
    
        plugins: [
            createPersistedState({
                storage: {
                    paths: ['counter'],
                    getItem: (key) => Cookie.getJSON(key),
                    setItem: (key, value) => Cookie.set(key, value, { expires: 3, secure: true }),
                    removeItem: (key) => Cookie.remove(key)
                }
            })
        ]
    });
    
    
    export default store;
    

    I am not getting any errors but the store doesn't persist. Am I doing anything wrong or is this feature not possible with nuxt ssr right now?

    I've seen #44 and I followed the instructions by @robinvdvleuten. That doesn't work so that's why I made this issue.

    opened by mtnptrsn 44
  • It doesn't work in store with different modules

    It doesn't work in store with different modules

    Good day,

    I just installed this package on my project.

    My scenario is, I have store folder and inside that store folder, I have 1 folder with a name of modules and a file store.js where it has instatiation of Vuex.Store inside.

    storefolder

    Inside the modules has multiple .js files.

    My store.js looks like this with createPersistedState inside but it doesn't work:

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    import module1 from './modules/module1'
    import module2 from './modules/module2'
    import module3 from './modules/module3'
    
    // import state persistent
    import createPersistedState from 'vuex-persistedstate';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        modules: {
             module1, module2, module3
        },
        plugins: [createPersistedState()]
    });
    
    export default store;
    

    The version that I'm using is: ^2.5.4

    Thank you in advance.

    opened by deanilvincent 21
  • How to use with ssr?

    How to use with ssr?

    Do you want to request a feature or report a bug? Yes i want to request a feature

    What is the current behavior? Nothing happens If the current behavior is a bug, please provide the steps to reproduce.

    What is the expected behavior? Setting cookies If this is a feature request, what is motivation or use case for changing the behavior? I need use persisted state in ssr, but can't understand how to implement this, so maybe you can give me some tips?

    opened by ProjectINT 17
  • Make compatible with SSR

    Make compatible with SSR

    Would be nice if vuex-persistedstate is compatible with server side rendering.

    Could be done to store the state in cookies for server side. Tried out a little example:

    import createPersistedState from 'vuex-persistedstate'
    import * as Cookies from 'js-cookie'
    
    export const plugins = [ createPersistedState({
      getState: (key) => Cookies.getJSON(key),
      setState: (key, state) => Cookies.set(key, state, { expires: 1, secure: false })
    }) ]
    

    But it's failing because the defaults are referencing localStorage and window object.

    line 57: var storage = ref.storage; if ( storage === void 0 ) storage = window && window.localStorage;
    

    Resulting in the following error:

    ReferenceError: window is not defined
    
    opened by frankspin89 14
  • I have used js-cookie in vuex-persistedstate,but when I refresh my brower is not exist

    I have used js-cookie in vuex-persistedstate,but when I refresh my brower is not exist

    mycomponent.vue

    ...
    created(){
            alert(this.teacherId)
        },
    computed:{
                ...mapState({
                    teacherId: state=>state.teacher.teacherId
                })
        },
    ...
     ...mapActions([
                'setTeacherId'
            ]),
    saveTeacher(){
               
         //่ฎพ็ฝฎ่€ๅธˆidไฟๅญ˜ๅœจๅ†…ๅญ˜ไธญ
         this.setTeacherId("111");                
    }
    ...
    

    store.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import Cookies from 'js-cookie'
    import createPersistedState from 'vuex-persistedstate'
    
    import teacher from './modules/teacher'
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        
        modules:{
           teacher
        },
        plugins: [createPersistedState({
            storage: {
              getItem: key => Cookies.get(key),
              setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
              removeItem: key => Cookies.remove(key)
            }
          })],
        state:{
            
        },
        mutations:{
            
        },
        actions: {
            
        }
    });
    
    export default store;
    

    teacher.js

    import Cookies from 'js-cookie'
    
    export default {
        state:{
          teacherId:''
        },
        mutations:{
            SET_TEACHER_ID(state,teacherId){
              state.teacherId = teacherId;
            }
        },
        actions:{
          setTeacherId(context,teacherId){
            context.commit('SET_TEACHER_ID',teacherId);
          }
        }
      };
    

    image

    question 
    opened by zhangwei900808 14
  • Dynamically registered modules

    Dynamically registered modules

    It seems to me that this plugin will not work for modules registered dynamically with store.registerModule. Obvious enough for those registered after restoring the state but I usually setup my store empty so it's available immediately and use it e.g. in the router, then I register each module with store.registerModule in a separate file.

    It might be worth noting this in the readme that this is not possible. Or maybe you could expose a function to read the state from the storage again so one could invoke it manually once all modules are registered?

    opened by chlab 13
  • Delete persisted state

    Delete persisted state

    Do you want to request a feature or report a bug? Feature

    What is the current behavior? There is no way to delete the persisted state programmatically, there are use cases for removing the state in local storage.

    If the current behavior is a bug, please provide the steps to reproduce.

    What is the expected behavior? We should be able to remove the state from local storage either with localStorage.removeItem('vuex') or something like this.$store.clear.

    If this is a feature request, what is motivation or use case for changing the behavior?

    When my users log out I want to remove all of the state data, this way when a different person logs in none of the existing data is shared.

    I tried to do this with localStorage.removeItem('vuex') however I see that in #37 it's commented that the plugin gets there first and the state is rewritten again.

    It's possible to do it manually, however this would mean setting all of the states to default values in all of the modules as far as I can tell which is not very efficient.

    opened by zagreusinoz 12
  • Vuex loses the state after page reload when using cookies accordingly to documentation

    Vuex loses the state after page reload when using cookies accordingly to documentation

    plugins: [
      createPersistedState({
        storage: {
          getItem: key => Cookies.get(key),
          // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
          setItem: (key, value) =>
            Cookies.set(key, value, { expires: 300000, secure: true }),
          removeItem: key => Cookies.remove(key)
        }
      })
    ],
    
    opened by eeerrrttty 12
  • Just curiosity

    Just curiosity

    When the plugin is using the localStorage and a refresh happends internally it is just commiting a mutation to kept in sync with the store and if I declare a mutation that mutate the state this is pick up by the plugin, if so what is the best way of doing it? I am making my own for more specific needs and I will appreciate your tips and answer.

    Are you changing the state directly from within the plugin?

    By the way awesome plugin...

    question 
    opened by ghost 11
  • v2.3.2: Uncaught RangeError: Maximum call stack size exceeded

    v2.3.2: Uncaught RangeError: Maximum call stack size exceeded

    Hi!

    Upgrading to 2.3.2 causes the error in this issue's title. This happens when the user has already visited the site and comes back. So the user has already a value stored in localStorage. This does not. The error does not happen when the value is initially written into the localStorage, only when it's read from there in the future visits.

    This is an example value that is stored in localStorage by the key vuex (as seen by the Application tab in Chrome Dev tools):

    {"prefs":{"showLocation":false,"locationAccepted":false,"showStops":true,"showGhosts":true,"realPhysics":false,"showFavOnStartup":false,"showOnlyFavBusses":false,"useTwoColorsForBusses":true,"singleBusColor":"vihreรค","fav":{"stop":["0505","0501","0514"],"hiddenStops":[],"stopNames":{},"busses":[],"bus":[]},"routing":{"searches":[],"saved":[]}}}

    Error message in Chrome Dev Tools console:

    vuex-persistedstate.umd.js:1 Uncaught RangeError: Maximum call stack size exceeded
        at Array.map (<anonymous>)
        at r (vuex-persistedstate.umd.js:1)
        at a (vuex-persistedstate.umd.js:1)
        at o (vuex-persistedstate.umd.js:1)
        at vuex-persistedstate.umd.js:1
        at Array.map (<anonymous>)
        at r (vuex-persistedstate.umd.js:1)
        at a (vuex-persistedstate.umd.js:1)
        at o (vuex-persistedstate.umd.js:1)
        at vuex-persistedstate.umd.js:1
    

    I reverted back to v2.1.2 where this doesn't happen.

    bug 
    opened by piehei 10
  • Nuxt middleware does not update vuex-persistedstate in cookies

    Nuxt middleware does not update vuex-persistedstate in cookies

    • vuex-persistedstate version: 4.0.0-beta.3
    • node version: v12.18.3
    • npm (or yarn) version: 1.22.10

    What you did:

    I was working on a Nuxt website with JWT Authentication, so I created a middleware in Nuxt to check if the jwtExpiresAt time was in the past, to know when to refresh the JWT token.

    What happened:

    While I was working on the middleware I tried to update the new refreshed JWT token in the store with a store action. I discoverd that when you use await store.dispatch('auth/login') the session is not being updated.. Turn's out is does update over client side, but when the middleware is called over SSR, say the first page load after hitting command + r or ctrl f5 is does not.

    My middleware auth.js:

    export default async function ({ app, error, store, redirect, route }) {
      // eslint-disable-next-line no-console
      console.log('AUTH MIDDLEWARE')
      // eslint-disable-next-line no-console
    
      // eslint-disable-next-line no-console
      console.log(store.getters['auth/isAuthenticated'])
      await store.dispatch('auth/login')
      // eslint-disable-next-line no-console
      console.log(store.getters['auth/isAuthenticated'])
    
      if (store.getters['auth/isAuthenticated']) {
        // eslint-disable-next-line no-console
        console.log('IS AUTHENTICATED')
      } else {
        // eslint-disable-next-line no-console
        console.log('IS NOT AUTHENTICATED')
      }
    }
    

    Don't forget to add the middleware in nuxt.config.js --> router:

    router: {
        prefetchLinks: true,
        trailingSlash: !isDev,
        linkPrefetchedClass: 'nuxt-link-prefetched',
        middleware: 'auth'
      }
    

    my store auth.js:

    export const state = () => ({
      isLoggedIn: false
    })
    
    export const mutations = {
      login (state, { isLoggedIn }) {
        state.isLoggedIn = isLoggedIn
      }
    }
    
    export const actions = {
      login ({ state, commit, dispatch, getters }) {
        commit('login', { isLoggedIn: true })
      },
      logout ({ state, commit, dispatch, getters }) {
        commit('login', { isLoggedIn: false })
      }
    }
    
    export const getters = {
      // determine if the user is authenticated based on the presence of the access token
      isAuthenticated: (state) => {
        return state.isLoggedIn
      }
    }
    
    

    middleware logs from console:

    AUTH MIDDLEWARE                                                                                                                                                                22:06:33
    false                                                                                                                                                                          22:06:33
    true                                                                                                                                                                           22:06:33
    IS AUTHENTICATED
    

    Actual session:

    image

    Reproduction sandbox:

    I created a brand new testing repo to double check if I wasn't causing the issues by some of my code: https://github.com/jornwildenbeest/nuxt-vuex-persistedstate-test

    Problem description:

    Javascript session is not being updated when calling store action from nuxt middleware over SSR. Turn's out is does update over client side, but when the middleware is called over SSR, say the first page load after hitting command + r or ctrl f5 is does not.

    opened by jornwildenbeest 0
  • Bump jest from 26.6.3 to 27.0.4

    Bump jest from 26.6.3 to 27.0.4

    Bumps jest from 26.6.3 to 27.0.4.

    Release notes

    Sourced from jest's releases.

    27.0.4

    Fixes

    • [jest-config, jest-resolve] Pass in require.resolve to resolvers to resolve from correct base (#11493)

    27.0.3

    Fixes

    • [jest-config] require.resolve on default test sequencer and test environment (#11482)
    • [jest-mock] Fixed fn and spyOn exports (#11480)

    27.0.2

    Features

    • [jest-circus] Add some APIs to make it easier to build your own test runner
    • [jest-reporters] Expose the getResultHeader util (#11460)
    • [jest-resolver] Export resolve* utils for different Jest modules (#11466)
    • [@jest/test-result] Export Test, TestEvents and TestFileEvent (#11466)

    Fixes

    • [jest-circus] Add missing slash dependency (#11465)
    • [jest-circus, @jest/test-sequencer] Remove dependency on jest-runner (#11466)
    • [jest-config] Resolve config.runner to absolute path (#11465)
    • [jest-config] Make sure to support functions as config (#11475)
    • [jest-core] Do not warn about DNSCHANNEL handles when using the --detectOpenHandles option (#11470)
    • [jest-runner] Remove dependency on jest-config (#11466)
    • [jest-worker] Loosen engine requirement to >= 10.13.0 (#11451)

    27.0.1

    Fixes

    • [jest-environment-jsdom] Bump version of JSDOM to avoid deprecated request package (#11442)

    27.0.0

    Blog post

    Features

    • [babel-jest] Add async transformation (#11192)
    • [jest-changed-files] Use '--' to separate paths from revisions (#11160)
    • [jest-circus] [BREAKING] Fail tests when multiple done() calls are made (#10624)
    • [jest-circus, jest-jasmine2] [BREAKING] Fail the test instead of just warning when describe returns a value (#10947)
    • [jest-config] [BREAKING] Default to Node testing environment instead of browser (JSDOM) (#9874)
    • [jest-config] [BREAKING] Use jest-circus as default test runner (#10686)
    • [jest-config] Add support for preset written in ESM (#11200)
    • [jest-config, jest-runtime] Support ESM for files other than .js and .mjs (#10823)
    • [jest-config, jest-runtime] [BREAKING] Use "modern" implementation as default for fake timers (#10874 & #11197)
    • [jest-config Allow passing forceNodeFilesystemAPI through to jest-haste-map (#11264)
    • [jest-config, jest-haste-map, jest-resolve, jest-runner, jest-runtime, jest-test-sequencer, jest-transform, jest-types] [BREAKING] Add custom HasteMap class implementation config option (#11107)

    ... (truncated)

    Changelog

    Sourced from jest's changelog.

    27.0.4

    Fixes

    • [jest-config, jest-resolve] Pass in require.resolve to resolvers to resolve from correct base (#11493)

    27.0.3

    Fixes

    • [jest-config] require.resolve on default test sequencer and test environment (#11482)
    • [jest-mock] Fixed fn and spyOn exports (#11480)

    27.0.2

    Features

    • [jest-circus] Add some APIs to make it easier to build your own test runner
    • [jest-reporters] Expose the getResultHeader util (#11460)
    • [jest-resolver] Export resolve* utils for different Jest modules (#11466)
    • [@jest/test-result] Export Test, TestEvents and TestFileEvent (#11466)

    Fixes

    • [jest-circus] Add missing slash dependency (#11465)
    • [jest-circus, @jest/test-sequencer] Remove dependency on jest-runner (#11466)
    • [jest-config] Resolve config.runner to absolute path (#11465)
    • [jest-config] Make sure to support functions as config (#11475)
    • [jest-core] Do not warn about DNSCHANNEL handles when using the --detectOpenHandles option (#11470)
    • [jest-runner] Remove dependency on jest-config (#11466)
    • [jest-worker] Loosen engine requirement to >= 10.13.0 (#11451)

    27.0.1

    Fixes

    • [jest-environment-jsdom] Bump version of JSDOM to avoid deprecated request package (#11442)

    27.0.0

    Features

    • [babel-jest] Add async transformation (#11192)
    • [jest-changed-files] Use '--' to separate paths from revisions (#11160)
    • [jest-circus] [BREAKING] Fail tests when multiple done() calls are made (#10624)
    • [jest-circus, jest-jasmine2] [BREAKING] Fail the test instead of just warning when describe returns a value (#10947)
    • [jest-config] [BREAKING] Default to Node testing environment instead of browser (JSDOM) (#9874)
    • [jest-config] [BREAKING] Use jest-circus as default test runner (#10686)
    • [jest-config] Add support for preset written in ESM (#11200)
    • [jest-config, jest-runtime] Support ESM for files other than .js and .mjs (#10823)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Vuex-persistedstate does not work properly in Gridsome project

    Vuex-persistedstate does not work properly in Gridsome project

    • vuex-persistedstate version: 4.0.0-beta.3
    • node version: v12.18.4
    • npm (or yarn) version: npm - 6.14.6, yarn - 1.22.5

    Relevant code or config

    import Vuex from "vuex";
    import createPersistedState from "vuex-persistedstate";
    
    const store = new Vuex.Store({
      state: {...},
      mutations: {...},
      actions: {...},
      getters: {...},
      plugins: isClient ? [createPersistedState()] : []
    });
    

    What you did: it works fine on local machine, but not working on production when deployed to Netlify.

    What happened: When I refresh a page that uses the persisted state, I get the below error.

    Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

    opened by lambdadev007 1
  • Possible conflict with @nuxt/auth and/or axios

    Possible conflict with @nuxt/auth and/or axios

    • vuex-persistedstate version:
    • node version: v16.1.0
    • npm version: 7.11.2

    It seems there's a compatibility issue with @nuxt/auth-next (and its previous version @nuxt/auth) or maybe with Axios.

    When saving a string, an array and an object when clicking a button set on the homepage, these data are properly saved to the store and made persistent at page reload. But data retrieved with Axios and then saved to Vuex store are not made persistent (although they have beed added to the paths in plugins/persistedState.js).

    I'm using Nuxt in universal mode and my configuration is the following.

    plugins/persistedState.js:

    import createPersistedState from 'vuex-persistedstate'
    import * as Cookies from 'js-cookie'
    import cookie from 'cookie'
    
    export default ({ store, req }) => {
      createPersistedState({
        // paths: ['darkMode'],
        paths: ['myString', 'myArr', 'myObj', 'myDataRetrievedWithAxios'],
        storage: {
          getItem: (key) => {
            // See https://nuxtjs.org/guide/plugins/#using-process-flags
            if (process.server) {
              const parsedCookies = cookie.parse(req.headers.cookie || '')
              return parsedCookies[key]
            } else {
              return Cookies.get(key)
            }
          },
          // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
          setItem: (key, value) =>
            Cookies.set(key, value, { expires: 365, secure: false }),
          removeItem: (key) => Cookies.remove(key),
        },
      })(store)
    }
    

    nuxt.config.js:

    import colors from 'vuetify/es5/util/colors'
    import webpack from 'webpack'
    
    export default {
      ...
      /*
       ** Plugins to load before mounting the App
       */
      plugins: [
        { src: '~/plugins/helpers' },
        // { src: '~/plugins/vuex-persist', ssr: false },
        { src: '~/plugins/persistedState.js' },
      ],
    ...
      /*
       ** Axios module configuration
       ** See https://axios.nuxtjs.org/options
       */
      axios: {},
      /*
       ** Auth module configuration
       ** See https://auth.nuxtjs.org
       */
      auth: {
        redirect: {
          login: '/',
          logout: '/',
          callback: '/auth/callback',
          home: '/home',
        },
        strategies: {
          laravelPassport: {
            provider: 'laravel/passport',
            endpoints: {
              user: {
                url: '/foo/user',
              },
              login: {
                baseURL: '',
              },
              refresh: {
                baseURL: '',
              },
            },
            url: process.env.API_URL,
            clientId: process.env.CLIENT_ID,
            clientSecret: process.env.CLIENT_SECRET,
            grantType: 'password',
            autoLogout: true,
          },
        },
      },
      ...
    }
    
    opened by gilles6 0
  • Bump husky from 5.2.0 to 6.0.0

    Bump husky from 5.2.0 to 6.0.0

    Bumps husky from 5.2.0 to 6.0.0.

    Release notes

    Sourced from husky's releases.

    v6.0.0

    After being in early access for Open Source projects and Sponsors for a limited time, I'm happy to announce that husky 6 is MIT again and can be freely used in commercial projects! ๐ŸŽ‰

    Many thanks to the Open Source projects and Companies which have switched to/sponsored the new husky during this period!

    OSS is my full-time job, please consider sponsoring the development of husky on GitHub sponsors or Open Collective. Thank you!

    Breaking change

    • husky init has been moved to its own package (npx husky-init)

    Added

    • Programmatically use husky: require('husky')
    • TypeScript definitions

    Migrating from husky 4

    Husky 6 contains breaking changes. If you're coming from v4, npm install [email protected] won't be enough.

    Recommended: see husky-4-to-6 CLI to automatically migrate your config. There's also a dedicated section in the docs.

    If you're curious why config has changed, you may be interested in reading: https://blog.typicode.com/husky-git-hooks-javascript-config/

    Also Husky 6 follows official npm and Yarn best practices regarding autoinstall. It's recommended to use prepare script instead (see usage in docs).

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • Add string type of header check

    Add string type of header check

    What: Bug in case of using nuxt ssr plugin from readme

    Why:

    How: Check type of cookie header and set to string if not

    Checklist:

    • [ ] Documentation
    • [ ] Tests
    • [x] Ready to be merged
    • [ ] Added myself to contributors table

    Issue #398

    opened by ilyapisany 1
  • Prevent JSON.parse to be called with a non string value

    Prevent JSON.parse to be called with a non string value

    What: Prevent JSON.parse to be called with a non string value

    Why: Sometimes (non standard storages) the item provided by getItem method is already of Object type.

    How: In general, JSON parse needs to be called with a string parameter, if this is satisfied, do it. If not, check if it is already a Object, and if it is, return it. Otherwise, return undefined.

    Checklist:

    • [N/A] Documentation
    • [x] Tests
    • [x] Ready to be merged
    • [ ] Added myself to contributors table
    opened by joaoaraujo-hotmart 0
  • argument str must be a string on nuxt server persist

    argument str must be a string on nuxt server persist

    • vuex-persistedstate version: ^4.0.0-beta.3
    • node version: v10.19.0
    • npm (or yarn) version: npm v16.14.4

    What you did: Install package and use default plugin from readme (nuxt cookie server persist)

    What happened: If no cookie set (example on first page loading).

    if (process.server) {
         const parsedCookies = cookie.parse(req.headers.cookie);
         return parsedCookies[key];
    }
    

    throws type error argument str must be a string

    Reproduction sandbox:

    Problem description: cookie package receive string as first parameter but undefined given on empty cookie in browser

    Suggested solution: Check is request.headers.cookie is string and set it to blank if not

    opened by ilyapisany 4
  • Handling key removal/addition/rename

    Handling key removal/addition/rename

    • vuex-persistedstate version: 4.0.0-beta.3
    • node version: 13.12
    • npm (or yarn) version: 6.14.4

    Relevant code or config

    What you did: I renamed a key in my state What happened: App crashed because the updated key didn't exist in localstorage state

    Reproduction sandbox:

    Problem description: I renamed one key in my state definition and since the state was loaded from local storage the new key was not in the state. What's the proper way of updating a key name? for example my state definition originally looked like this

    export const state  = () => ({
      foo: {
        user: {
          first_name: '',
        }
      }
    })
    

    so my local storage looked like { foo: {user: { first_name: '' } } }

    i then updated my state definition to

    export const state  = () => ({
      foo: {
        account: {
          first_name: '',
        }
      }
    })
    

    and references to foo.user.first_name were updated to foo.account.first_name. My app crashes here because state still has foo.user. How do i go about updating my local storage state so that it has the new key? Suggested solution:

    opened by palfaro91 0
  • How it use with Subdomains?

    How it use with Subdomains?

    Hi! Thanks for you package!

    How can I get one local storage for all my subdomains? Is it possible?

    opened by mrFANRA 1
Releases(v4.0.0-beta.3)
  • v4.0.0-beta.3(Jan 11, 2021)

  • v3.2.0(Jan 11, 2021)

    Minor Changes

    • Moved storage.getItem function: #299
    • Update nuxt instructions in README.md: #331

    Patches

    • Fix releases link: #300
    • Update README.md: #340
    • Update README for Vuex 4.0 usage: 511e61e484b3c90bf5962e2addfc187f6a630b58
    • Update README.md: #348
    • Bump shvl to fix prototype pollution issue. Closes #387: acefa73dbb9297a7bca665452f1df084c11101ac

    Credits

    Huge thanks to @yachaka, @FreekVR, @peschee, @adm1t, and @retailify for helping!

    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.2(Jan 7, 2021)

    Minor Changes

    • Require at least RC version of Vuex: ebd71713ea41c89f7a9e81b3e6728f07162d41a3
    • Remove Vue as peer dependency: a72bf84cd17ca2eb57e8e972be2f5bf33926f3f7
    • Fix incorrect version of Vuex as peer: 4338d55735852cc66535969a67c3b751bb3bc2e9

    Patches

    • Bump shvl from 2.0.0 to 2.0.1: #295
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.1(Oct 9, 2020)

    Support For Vuex 4.0 ๐ŸŽ‰

    To use the plugin with Vuex 4.0, you can initialize the plugin like the following;

    import { createStore } from "vuex";
    import createPersistedState from "vuex-persistedstate";
    
    const store = createStore({
      // ...
      plugins: [createPersistedState()],
    });
    

    Major Changes

    • Drop support for Vuex 2.0: 9c8c9d08dc85d73cf0d50e07efb360229f466fcb

    Minor Changes

    • Moved storage.getItem function: #299
    • Update nuxt instructions in README.md: #331
    • Add support for Vue 3.0 and Vuex 4.0: 3f57f212beceffc2f1b43a0acfe9d34935db8b05

    Patches

    • Fix releases link: #300
    • Update README.md: #340

    Credits

    Huge thanks to @yachaka, @FreekVR, @peschee, and @adm1t for helping!

    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(Aug 4, 2020)

    Minor Changes

    • Add generic for store state type: #267
    • Fixing Typescript generic inconsistencies and "arrayMerger" parameters types: #273

    Credits

    Huge thanks to @SanterreJo and @robertgr991 for helping!

    Source code(tar.gz)
    Source code(zip)
  • v3.0.1(Mar 27, 2020)

    Patches

    • Optional storage and key parameters: #258
    • Replace parameters with variables: d9ce981298103d46d2174e6f501ab907290e7edd

    Credits

    Huge thanks to @WTDuck for helping!

    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Mar 25, 2020)

    Major Changes

    • Return specifc error on initialization: #252
    • Make distinction between empty array and no array: a34163fd75e48c08efe804e66896c8d59ffa2138

    Minor Changes

    • Optimize resolving from options: 8081e69e95b86ada4e74832e7987a7c069100468
    • Add .d.ts for Options.fetchBeforeUse: #245
    • Add 'overwrite' option to bypass object merging: #160
    • Rewrite plugin to typescript: #249

    Credits

    Huge thanks to @gangsthub, @hughns, and @scottp-dpaw for helping!

    Source code(tar.gz)
    Source code(zip)
  • v2.7.1(Feb 5, 2020)

  • v2.7.0(Oct 30, 2019)

    Minor Changes

    • Add rehydrated callback: #207
    • Handle dynamically registered modules: #225
    • Update deepmerge to its latest version: 30f6b626e0d5816431677b20f7e83581653aba6f
    • Update shvl to its latest version: b036e2b1ba2dba5912647644020fd3c0b5c915a2

    Credits

    Huge thanks to @nelsliu9121 and @boris-graeff for helping!

    Source code(tar.gz)
    Source code(zip)
  • v2.6.0(Oct 27, 2019)

    Minor Changes

    • Improve Nuxt.js example to support nuxt generate: #170
    • Updated all dependencies to their latest versions: 785899301e30f4219da3c92e04b69477af742f9a
    • Add missing arrayMerger interface: #186
    • Example of encrypted local storage: #217
    • Function getItem should return something: #220

    Credits

    Huge thanks to @Atinux, @JakubKoralewski, @macarthuror, and @zgayjjf for helping!

    Source code(tar.gz)
    Source code(zip)
  • v2.5.4(May 17, 2018)

  • v2.5.3(May 13, 2018)

  • v2.5.2(Apr 10, 2018)

  • v2.5.1(Mar 16, 2018)

  • v2.5.0(Mar 13, 2018)

    Minor Changes

    • Do not include external dependencies in build output: #101
    • Replaced custom rollup config with microbundle: #104
    • Made merging of arrays customizable: #124
    • Add documentation for Nuxt.js: #125

    Credits

    Huge thanks to @zweizeichen for helping!

    Source code(tar.gz)
    Source code(zip)
  • v2.4.2(Nov 23, 2017)

  • v2.4.1(Nov 22, 2017)

  • v2.4.0(Nov 22, 2017)

    Minor Changes

    • Overwrite array values instead of merging them: #89
    • Do not clone objects to prevent circular issue: #93
    • Updated all dependencies to their latest versions: 1a4685a7fa6430a8249ffebc5acf2d6b72eb5524
    • Include the original plugin js file: c45d80e63c5a4214fdbf7069a4177f18182f12c9

    Credits

    Huge thanks to @NLNicoo and @pip36 for their help!

    Source code(tar.gz)
    Source code(zip)
  • v2.3.2(Nov 9, 2017)

  • v2.3.1(Nov 6, 2017)

  • v2.3.0(Nov 4, 2017)

    Minor Changes

    • Made dependencies actual dependencies when using ES6: 298f419968b4b9dae2002aae5728edb1da32e342
    • Removed any ES6 related code to make plugin even leaner: a7867a5ac8276a3aef7c8c63ce4e358d140f5260

    Patches

    • Fix working with null values: #78

    Credits

    Huge thanks to @rodneyrehm for his help!

    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Nov 3, 2017)

  • v2.1.2(Nov 2, 2017)

  • v2.1.1(Nov 1, 2017)

  • v2.1.0(Nov 1, 2017)

    Minor Changes

    • Improved build output: #72
    • Replaced object-path with custom function: #71
    • Fixed peer dependency allow Vuex v3.0.0: #70

    Patches

    • Added code of conduct to project: 1fe1a93
    • Added note about localForage: 27763b1
    • Small refactoring of the build process through rollup: 81bf4cf
    • Updated customisation example to reflect latest API changes: d81f6b0
    • Fix mixed up test titles: #39

    Credits

    Huge thanks to @gurpreetatwal and @jrast for their help!

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Jul 4, 2017)

    Major Changes

    • Leave initial state if json is invalid: #33
    • Remove default storage implementation: #35

    Minor Changes

    • Replaced ava / sinon testing with jest: #34
    Source code(tar.gz)
    Source code(zip)
  • v1.4.1(Apr 24, 2017)

  • v1.4.0(Apr 17, 2017)

    Minor Changes

    • Added version requirements for Vue: 65a4a7509ded91e3804ecc1a98c7626f0ff37613
    • Added support for prettier.: 6febfa0f95864a539510ba8c90722751bc6ce399

    Patches

    • Additional check to avoid QUOTA_EXCEEDED_ERR in Safari private browsing: #17

    Credits

    Huge thanks to @raphaelsaunier for his help!

    Source code(tar.gz)
    Source code(zip)
Owner
Robin van der Vleuten
Eats pixels for breakfast and bytes for lunch. Dinner is a story on its own. Runs his own startup (@webstronauts) in a garage.
Robin van der Vleuten
๐Ÿ’พ 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.2k Jun 4, 2021
Enable two-way data binding for form fields saved in a Vuex store

vuex-map-fields Enable two-way data binding for form fields saved in a Vuex store. Install npm install --save vuex-map-fields Basic example The follow

Markus Oberlehner 1.3k Jun 11, 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.2k Jun 13, 2021
Better DX for Vue 3 state management solution

vuex-light Why Have you ever want to know "what type payload is" or "what getters the store have" when use the vuex? In vuex-light, you have better ty

Ernest 8 Jun 4, 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 150 Jun 1, 2021
[NO LONGER MAINTAINED] `vuex-dry` helps keep your vuex codes DRY.

NO LONGER MAINTAINED This repository is not actively maintained. I haven't used this package for a year. It means there has been no change. You can st

Eunjae Lee 55 Oct 9, 2020
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 100 Mar 1, 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
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. Documentation Documentation, including

Matthew Richardson 131 Jun 3, 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
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 96 May 25, 2021
๐Ÿ’พ A State Snapshot plugin on Actions/Mutations for Vuex3.1+.

Vuex Stateshot ?? A State Snapshot plugin on Actions/Mutations for Vuex3.1+. Installation npm i vuex-stateshot -S or yarn add vuex-stateshot -S Demo S

Yunwei Xiao 12 Apr 29, 2021
Vuex-Queries helps you write query functions in Vuex

Vuex-Queries Vuex-Queries helps you write query functions in Vuex Usage Write your queries in Vuex options: const options = { state: { events: [

Wu Haotian 12 Dec 15, 2018
Deprecated - Effortlessly handle api calls with vuex without repeating yourself.

Deprecated Not maintenained anymore. Vuex api Intro vuex-api is a library that wants to help you handle API as easily as possible. Yes, that's it ! In

null 83 Jul 30, 2020