Comments (6)
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
from vuex-persistedstate.
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
from vuex-persistedstate.
@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.
from vuex-persistedstate.
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.
from vuex-persistedstate.
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)
})
}
from vuex-persistedstate.
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);
});
};
from vuex-persistedstate.
Related Issues (20)
- how can i use dynamic key HOT 2
- Not working with Secure-Ls HOT 1
- High Severity: Prototype Pollution vulnerability in module shvl
- How to encrypt sessionStorage using secure-ls? HOT 1
- Feature Request: Code Examples / Documentation for Options
- Lots of plugins? HOT 1
- VueDevtools not data HOT 1
- Example needed: path options and namespaces HOT 1
- secure-ls | Uncaught Error: Could not parse JSON HOT 2
- Wrong data after restore. HOT 1
- One cookie by module with JS-COOKIE
- Storage option with Js cookie stops working suddenly HOT 1
- vuex-persistedstate does not follow vuex plugin guidelines HOT 2
- Newbe Question - Restore data from localStore to Vuex on page reload in Nuxt.js HOT 2
- Unable to access data from Vuex after rehydration in Nuxt.js HOT 2
- Clearing localstorage in developer tools not working HOT 2
- Feature Request: Support Pinia HOT 1
- [Feature Request] can `paths` option support `function` and `Regex`?
- It's not clear to me if Vuex 3 and Vue 2 are supported by vuex-persistedstate 4
- Exemple using cookie-universal-nuxt HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuex-persistedstate.