Vue 使用 useDark() 不会触发计算或监视答案

【问题标题】：VueUse useDark() does not trigger computed or watchVue 使用 useDark() 不会触发计算或监视
【发布时间】：2022-08-08 18:37:59
【问题描述】：

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,
  };
}

标签： vue.js computed-properties composable vueuse

【解决方案1】：

我想你需要像这样使用你的手表：

watch(() => isDark, (newValue) => {
  console.log(newValue);
})

关于计算，我不确定它是否可以这样工作，我从未见过这样初始化计算。

它可能应该是这样的：

const state = computed(() => isDark.value ? 'dark' : 'light');

【讨论】：

``` watch(() => isDark, (newValue) => { console.log(newValue); }) ``` 这不起作用。我试过了。我相信这是一个 getter 函数，应该在跟踪反应对象的变化时使用。

【解决方案2】：

我有同样的问题，主要是因为我尝试在很多地方使用它，我认为它没有意义

const isDark = useDark()
const toggleDark = useToggle(isDark);

watch: {
    isDark: {
      handler(val) {
        useThemeConfigStore.setTheme(val == true ? "dark" : "light");
      },
    },
  },

我只是删除了其他文件，然后使用 pinia 或 vuex 来监视状态

【讨论】：