Vuex-persistedstate: How does this work?

[metodib]

Sorry, this is a stupid question... but how does this work?

I have:

import user from './modules/user';
Vue.use(Vuex);

export const store = new Vuex.Store({
  modules: {
    user,
    plugins: [ createPersistedState({
      paths: [ 'user' ]
    })]
  }
});

and in user module I have this:

const state = {
  currentUser: null,
  userAds: null
};

So I was kinda expecting that whatever code updates that currentUser, this plugin would automatically push it to localStorage. What steps am I missing (as what I'm doing clearly isn't working). Is there anything else, anywhere else I need to add/configure?

Thank you!

[robinvdvleuten]

@bigbadwoolfe please see the provided example. It should automatically be pushed to your localstorage. What you could do is try to use nested paths like user.currentUser and see if that works.

[metodib]

Thanks for your response.

Yeah, after about 6 hours yesterday, I sort of gave up temporarily as there's no good reason why it doesn't work. I tried all sorts of paths, no paths, different config, and none of that pushes anything to localStorage.

I'll try a basic example where things aren't split in modules and see if that does the trick and work backwards.

[vesper8]

oof I have to say the docs are a bit lacking when it comes to explaining how to use this with modules.. but I figure it out after a bit of trial and error.

First, this is how I use it for items that are set in store.js itself

const vuePersist = {
  reducer: state => ({
    lang: state.lang,
  }),
  saveState: (key, state, storage) => {
    requestIdleCallback(() => {
      storage.setItem(key, JSON.stringify(state));
    });
  },
};

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

Now, most of my state items are stored into modules, so for example if I move the state.lang above to a module called Site.js

Then if you want to persist everything inside the Site module to localStorage you would do this

const vuePersist = {
  reducer: state => ({
    site: state.site,
  }),

But if you only want to persist some items inside the Site module, then you would do this

const vuePersist = {
  reducer: state => ({
    site: {
      lang: state.site.lang,
    },

there you go, hope that helps

[renoirb]

I had the same problem as you today, @vesper8.
But, I found an easier solution than yours.
Instead of using / for module path separator, use ., like you would dig inside an object.
It is not written in the docs, but the tests covers that use-case

[michaelpumo]

As @renoirb has mentioned, you need to reference the module path with a . and not (as I would assume) a /.

I'm using it with Nuxt inside of a plugin. I'm also using cookies for storage rather than localStorage. It looks like so:

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

export default ({ store }) => {
  window.onNuxtReady(() => {
    createPersistedState({
      key: 'my-amazing-store',
      paths: [
        'myModuleName.saved',
        'myModuleName.selected'
      ],
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7, secure: true }),
        removeItem: key => Cookies.remove(key)
      }
    })(store)
  })
}

[yajinn]

Hi, @bigbadwoolfe i used "vuex-persistedstate" and I have solved as follows "modules.storeName"

import createPersistedState from 'vuex-persistedstate';
export default ({ store }) => {
    window.onNuxtReady(() => {
        createPersistedState({
            key: 'Emlak',
            paths: ['modules.favorite'],
            storage: {
                getItem: key => localStorage.getItem(key),
                setItem: (key, value) => localStorage.setItem(key, value),
                removeItem: key => localStorage.removeItem(key),
            },
        })(store);
    });
};