How to add Vuex-Persist to the Application?

Hi,

How can I add Vuex-persist to the application? I tried adding the Vuex-persist the way mentioned in their documentation, but doing that makes the Vuex states show empty on The Vue-dev-tools. Also is there any way to persist a selected module or state? because I don't want to persist my whole Vuex store.

Tired to get some documentation around the Vuex-Module-Decorator package you guys using to build the module, but no examples are available regrind persisting using Vuex-persist.

Any help?

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Hi,

It looks like the only way to use Vuex-persist is to persist the whole Vuex store.

Example:

...
import VuexPersistence from 'vuex-persist';


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

const store = createStore({
modules: {
//your modules
},
plugins: [vuexLocal.plugin],
});
...

I Tired this, But doing this, seems to break the `Vuex` section inside my `Vuetify-dev-tools` all Vuex state shows empty once I add the plugin to the Vuex store.

Did you make any changes inside module files?

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(