VueUse useDark()不触发计算或监视
VueUse useDark()不触发计算或监视
提问于 2022-07-20 12:01:40
import { useDark } from '@vueuse/core';
const isDark = useDark();
watch(isDark, () => {
console.log('dark mode changed'); // does not trigger watch
}, { deep: true })
const scheme = computed(isDark, () => {
options: isDark.value ? 'dark' : 'light' // does not trigger update of scheme
})
</script>``但是，像下面这样的自定义组合会触发手表的更新和计算。另外，这个vueuse库返回WritableComputedRef类型，我不知道这是否是问题所在。
const isDarkMode = ref(false);
export function useDarkMode() {
const KEY = 'dark-mode';
isDarkMode.value = (localStorage.getItem(KEY) ?? '') === 'dark';
function toggleDarkMode() {
isDarkMode.value = !isDarkMode.value;
localStorage.setItem(KEY, isDarkMode.value ? 'dark' : '');
}
return {
isDarkMode,
toggleDarkMode,
};
}回答 2
Stack Overflow用户
发布于 2022-07-20 12:24:25
我想你需要这样使用你的手表：
watch(() => isDark, (newValue) => {
console.log(newValue);
})关于计算，我不确定它是否能那样工作，我从来没有见过像这样初始化的计算。
应该是这样的：
const state = computed(() => isDark.value ? 'dark' : 'light');Stack Overflow用户
发布于 2022-08-08 10:37:59
我也有同样的问题，主要是因为我试图在很多地方使用它，只是我觉得没有道理。
const isDark = useDark()
const toggleDark = useToggle(isDark);
watch: {
isDark: {
handler(val) {
useThemeConfigStore.setTheme(val == true ? "dark" : "light");
},
},
},我只需删除其他文件，只需使用pinia或vuex来监视状态。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73051317
复制相关文章
相似问题
腾讯云开发者
