Vuex getter isn't updating, but not clear how that's possible - vue.js

Question

I have the following code, and the darkmode getter updates correctly. The initial state of _darkmode = false.
state = {
_darkmode: false
}
darkmode: (state) => {
if (localStorage.getItem(STORAGE_KEY_DARKMODE) === null) {
return state._darkmode;
} else {
const newDarkmode = JSON.parse(
localStorage.getItem(STORAGE_KEY_DARKMODE)
);
​
if (state._darkmode) {
console.log("parsed", newDarkmode);
} else {
console.log("parsed", newDarkmode);
}
​
return newDarkmode;
}
},
But the following code results in the getter not being updated:
darkmode: (state) => {
if (localStorage.getItem(STORAGE_KEY_DARKMODE) === null) {
return state._darkmode;
} else {
const newDarkmode = JSON.parse(
localStorage.getItem(STORAGE_KEY_DARKMODE)
);
​
return newDarkmode;
}
},
I'm clueless on what the "magic" behind this is.

Answer 1

Vuex caches the result of the getter and only will update its value when the dependencies changes.
Here a quote from the docs:
Vuex allows us to define "getters" in the store. You can think of them as computed properties for stores. Like computed properties, a getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.
Link: https://vuex.vuejs.org/guide/getters.html#getters
I think you should update the _darkmode value with some action inside your code logic with the value from the localStorage, then the getter will be updated.