Vue2 Composition API：如何关联可变ref与不可变响应式计算属性？

我来帮你搞定这个同步问题，核心就是让只读的darkMode计算属性和可交互的darkModeToggle开关实现双向联动——既要让开关初始就显示正确的状态，也要在全局偏好变化时同步更新开关，同时保留通过setPreference修改值的逻辑。下面是两种可行的方案：

方案一：使用 Ref + 双 Watch 监听 #

这种方式直观易懂，适合需要额外处理逻辑的场景：

// Settings.vue
import { defineComponent, ref, watch } from '@vue/composition-api'
import { useApplicationPreferences } from './useApplicationPreferences'

export default defineComponent({
  setup() {
    const { darkMode, setPreference } = useApplicationPreferences()
    
    // 1. 初始化开关状态，同步当前的暗黑模式偏好
    const darkModeToggle = ref(darkMode.value)

    // 2. 监听全局darkMode的变化，实时更新开关状态
    // （比如其他组件调用setPreference时，开关要同步变化）
    watch(darkMode, (newDarkModeValue) => {
      darkModeToggle.value = newDarkModeValue
    })

    // 3. 监听开关的用户操作，调用setPreference更新全局偏好
    watch(darkModeToggle, async (newValue) => {
      // 注：原代码里的setPreference只接收一个preference参数，你提到的{ saveToBackend: true }需要在useApplicationPreferences里扩展参数支持
      await setPreference({ darkMode: newValue })
    })

    return { darkModeToggle }
  },
})

为什么这么做？ #

• 初始赋值darkModeToggle.value = darkMode.value保证开关一开始就显示正确的状态
• 监听darkMode是因为它是基于全局状态的计算属性，当其他地方修改暗黑模式偏好时，开关能自动同步
• 保留监听darkModeToggle的逻辑，确保用户操作开关时能触发全局偏好的更新

方案二：使用可写计算属性（推荐） #

这种方式更简洁，利用Vue的可写计算属性自动处理双向同步，不需要额外的watch：

// Settings.vue
import { defineComponent, computed } from '@vue/composition-api'
import { useApplicationPreferences } from './useApplicationPreferences'

export default defineComponent({
  setup() {
    const { darkMode, setPreference } = useApplicationPreferences()
    
    // 用可写计算属性替代ref+双watch
    const darkModeToggle = computed({
      // 读取时返回全局darkMode的值，自动同步初始状态和后续变化
      get() {
        return darkMode.value
      },
      // 修改时调用setPreference更新全局偏好
      async set(newValue) {
        await setPreference({ darkMode: newValue })
      }
    })

    return { darkModeToggle }
  },
})

优势 #

• 代码更简洁，逻辑更集中
• 自动处理双向同步，不需要手动维护多个watch
• 符合Vue的响应式设计理念，可读性更高

另外，如果你需要支持saveToBackend参数，只需要修改useApplicationPreferences.ts里的setPreference方法，让它接收第二个参数：

// useApplicationPreferences.ts
export const useApplicationPreferences = () => {
  const setPreference = async (
    preference: { darkMode?: boolean },
    options?: { saveToBackend?: boolean }
  ) => {
    if (preference.darkMode != null) {
      Dark.set(preference.darkMode)
      state.preference.darkMode = preference.darkMode
      
      // 新增：如果需要保存到后端，在这里处理逻辑
      if (options?.saveToBackend) {
        // 比如调用API保存偏好
        // await api.savePreferences(state.preference)
      }
    }
  }

  return { darkMode: computed(() => state.preference.darkMode), setPreference }
}

然后在调用时传入参数即可：

async set(newValue) {
  await setPreference({ darkMode: newValue }, { saveToBackend: true })
}

内容的提问来源于stack exchange，提问作者DarkLite1