Vuex getter 没有更新，但不清楚这怎么可能

Question

我有以下代码，并且darkmode getter更新正确。_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;
}
},

但是下面的代码导致getter不被更新:

darkmode: (state) => {
if (localStorage.getItem(STORAGE_KEY_DARKMODE) === null) {
return state._darkmode;
} else {
const newDarkmode = JSON.parse(
localStorage.getItem(STORAGE_KEY_DARKMODE)
);
​
return newDarkmode;
}
},

我不知道什么是"魔法"。这背后是。

Answer 1

Vuex缓存getter的结果，只有当依赖项发生变化时才会更新它的值。

这里引用自文档:

Vuex允许我们定义"getter";在商店里。您可以将它们视为存储的计算属性。像计算属性一样，getter的结果是基于它的依赖项缓存的，只有当它的一些依赖项发生变化时才会重新计算。

链接:https://vuex.vuejs.org/guide/getters.html getter

我认为你应该在你的代码逻辑中使用localStorage的值来更新_darkmode值，然后getter将被更新。