VueUse useDark()不会触发computed或watch

enyaitl3 于 2023-05-07 发布在 Vue.js

关注(0)|答案(3)|浏览(210)

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

来源：https://stackoverflow.com/questions/73051317/vueuse-usedark-does-not-trigger-computed-or-watch

3条答案

按热度按时间

gmxoilav1#

手表和电脑都没能帮我。我宁愿使用这个函数，因为它已经记录在案。

import { useDark } from '@vueuse/core'

const isDark = useDark({
  onChanged(dark: boolean) {
    // update the dom, call the API or something
    console.log('hello', dark)
  },
})

赞(0）回复(0）举报 2023-05-07

bxjv4tth2#

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

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

关于计算机，我不确定它是否可以这样工作，我从来没有见过这样初始化的计算机。
它看起来应该像这样：

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

赞(0）回复(0）举报 2023-05-07

uelo1irk3#

我有同样的问题，主要是因为我试图在许多地方使用它，它只是没有意义，我想

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

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

我只是简单地删除其他文件，并使用pinia或vuex来监视状态

赞(0）回复(0）举报 2023-05-07

我来回答

VueUse useDark()不会触发computed或watch

但是，像下面这样的自定义组合确实会触发监视和计算的更新。此外，这个vueuse库返回类型WritableComputedRef，我不知道这是否是这里的问题。

3条答案

相关问题

热门标签

最新问答