Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(