Vuex-persistedstate: It doesn't work in store with different modules

[deanilvincent]

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.

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.

[valeriancure]

try :
const persistedPaths = ['module1', 'module2', 'module3'] ... plugins: [ createPersistedState({ paths: persistedPaths }) ]

[deanilvincent]

@valeriancure it doesn't work either.

[CarlKlein]

Hi,

My setup is basically the same and I don't have the issue. Only difference is how I include the modules in the store:

const store = new Vuex.Store({
        modules: {
            module1: module1,
            module2: module2,
            module3: module3,
        },
        plugins: [createPersistedState({
            key: 'MYAPP'
        })]
    });

[jhonja93]

Hi,

I have the same configuration as @CarlKlein, what happens if I have nested modules, how do I prevent these modules from persisting?

[robinvdvleuten]

@deanilvincent please create a codesandbox where the issue can be reproduced. I do not have the time unfortunately to recreate everybody's setup.

[AlexNikonov]

Try to remove 'paths' parameter at all. In my case it solved issue.

[enbermudas]

None of this two solutions is working for me. I don't know what else can I do.

I'm using the same version: ^2.5.4

[oimou]

It works for me. This might help you find out the cause.
https://codesandbox.io/s/vuex-persistedstate-mh9ge

[matinjugou]

I guess this problem is about the namespace, which VUEX's developers have already mentioned in their documentation: caveat-for-plugin-developers

[sanderyt]

It works for me. This might help you find out the cause.
https://codesandbox.io/s/vuex-persistedstate-mh9ge

This solved it for me.

[thekubilay]

It works for me. This might help you find out the cause.
codesandbox.io/s/vuex-persistedstate-mh9ge

This solved it for me.

it helped a lot. thank you for the sandbox also...

[l619534951]

It works for me. This might help you find out the cause.
codesandbox.io/s/vuex-persistedstate-mh9ge

This solved it for me.

it helped a lot. thank you for the sandbox also...

I also encountered this problem, how did you solve it ?, the page is 404, could you help me ?

[thekubilay]

这个对我有用。这可以帮助您找出原因。
codeandbox.io/s/vuex-persistedstate-mh9ge

这为我解决了。

它很有帮助。谢谢你的沙箱...

I also encountered this problem, how did you solve it ?, the page is 404, could you help me ?

it's bad news the page is 404.
but you can get a idea from my code.
here is the example of usage:

import {asana} from "../src/stores/asana";
import {database} from "../src/stores/database";
import {globals} from "../src/stores/globals";

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        asana,
        database,
        globals,
    },
    plugins: [
        createPersistedState({
            paths: ["database.presanceAsana", "globals.visiblePage", "globals.activeTab",]
        })
    ]

})

paths is array that contains modules and it's states. for example I have a module that named database and it has state that named presanceAsana

I hope it helps...

[l619534951]

for example I have a module that named

I had already try that, but it's not work, did you use namespace options in the state ?

[thekubilay]

for example I have a module that named

I had already try that, but it's not work, did you use namespace options in the state ?

nope I didn't, no need to use namespace in the state. what's ur error exactly?

[l619534951]

nope I didn't, no need to use namespace in the state. what's ur error exactly?
The

for example I have a module that named

I had already try that, but it's not work, did you use namespace options in the state ?

nope I didn't, no need to use namespace in the state. what's ur error exactly?

The state is not persisted to localstore...

[thekubilay]

The state is not persisted to localstore...

you are pretty much using it wrong, that's why.

here try it like below.

plugins: [
    createPersistedState({
        paths: ["user.yourStateName,]
    })
]

when you import the module. Let's say in your case this is your user module. Use it in the paths array like above. And after that write the .yourStateName which state you want to store in the localStorage.

by the way. your should import your modules inside the curly bracket {user}, {settings}

[l619534951]

The state is not persisted to localstore...

you are pretty much using it wrong, that's why.

here try it like below.

plugins: [
  createPersistedState({
      paths: ["user.yourStateName,]
  })
]

when you import the module. Let's say in your case this is your user module. Use it in the paths array like above. And after that write the .yourStateName which state you want to store in the localStorage.

by the way. your should import your modules inside the curly bracket {user}, {settings}

This is my code, Is there something mistake i made ? The state is not persisted to localstore... https://codesandbox.io/s/nice-jones-fjojt

[thekubilay]

This is my code, Is there something mistake i made ? The state is not persisted to localstore... codesandbox.io/s/nice-jones-fjojt

store.js is empty

[l619534951]

codesandbox.io/s/nice-jones-fjojt

sorry, i had fixed that

[l619534951]

This is my code, Is there something mistake i made ? The state is not persisted to localstore... codesandbox.io/s/nice-jones-fjojt

store.js is empty

all problem are fixed, thank you a lot.