refactor: dark mode toggle with computed props

Author: cwandev

src/pages/index.vue

@@ -4,6 +4,11 @@ import { languageColumns, locale } from '@/utils/i18n'
 
 const { t } = useI18n()
 
+const checked = computed({
+  get: () => isDark.value,
+  set: () => toggleDark(),
+})
+
 const menuItems = computed(() => ([
   { title: t('menus.mockGuide'), route: 'mock' },
   { title: t('menus.echartsDemo'), route: 'charts' },
@@ -22,41 +27,29 @@ function onLanguageConfirm(event: { selectedOptions: PickerColumn }) {
   locale.value = event.selectedOptions[0].value as string
   showLanguagePicker.value = false
 }
-
-const checked = ref<boolean>(isDark.value)
-
-watchEffect(() => {
-  checked.value = isDark.value
-})
-
-function toggle(val: boolean) {
-  checked.value = val
-  toggleDark()
-}
 </script>
 
 <template>
-  <van-cell-group :title="t('menus.basicSettings')" :border="false" :inset="true">
-    <van-cell center :title="t('menus.darkMode')">
+  <van-cell-group :title="$t('menus.basicSettings')" :border="false" :inset="true">
+    <van-cell center :title="$t('menus.darkMode')">
       <template #right-icon>
         <van-switch
           v-model="checked"
           size="20px"
           aria-label="on/off Dark Mode"
-          @change="toggle"
         />
       </template>
     </van-cell>
 
     <van-cell
       is-link
-      :title="t('menus.language')"
+      :title="$t('menus.language')"
       :value="language"
       @click="showLanguagePicker = true"
     />
   </van-cell-group>
 
-  <van-cell-group :title="t('menus.exampleComponents')" :border="false" :inset="true">
+  <van-cell-group :title="$t('menus.exampleComponents')" :border="false" :inset="true">
     <template v-for="item in menuItems" :key="item.route">
       <van-cell :title="item.title" :to="item.route" is-link />
     </template>