如何将可变对象连接到不可变反应对象？答案

【问题标题】：How to connect a mutable to an immutable reacitve object?如何将可变对象连接到不可变反应对象？
【发布时间】：2021-03-20 17:04:17
【问题描述】：

我们有一个可组合函数 useApplicationPreferences() 在 Vue 2 中与 Composition API 一起使用。此函数公开了一个计算后的不可写 ref，称为 darkMode：

//useApplicationPreferences.ts
import { reactive, computed } from '@vue/composition-api'
import { Dark } from 'quasar'

const defaultState = () => ({
  preference: {
    darkMode: true,
  },
})

const state = reactive(defaultState())

export const useApplicationPreferences = () => {
  const setPreference = async (
    preference: {
      darkMode?: boolean
    }
  ) => {
    if (preference.darkMode != null) {
      Dark.set(preference.darkMode)
      state.preference.darkMode = preference.darkMode
    }
  }

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

我们在应用的另一部分成功地使用了这个功能，就在用户登录之后。这是从后端获取首选项并在应用程序中设置它们。我们遇到的问题是在另一个页面上，我们有一个带有 `v-model="darkModeToggle" 的切换按钮。

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

export default defineComponent({
  setup() {
    const { darkMode, setPreference } = useApplicationPreferences()
    const darkModeToggle = ref(darkMode.value)

    watch(
      () => darkModeToggle.value,
      async (newValue) => {
        await setPreference({ darkMode: newValue }, { saveToBackend: true })
      }
    )

    return {
      darkModeToggle,
    }
  },
})

如何将darkMode 从可组合连接到Settings.vue 模板中的darkModeToggle 引用？计算的属性darkMode 不可写。但是切换应该将其用作值，并且能够通过调用 setPreference() 来更改其值。

感谢您的帮助。

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-composition-api

【解决方案1】：

感觉有点傻。在发布问题后，我在Vue docs 中找到了get 和set 的computed 属性选项：

export default defineComponent({
  setup() {
    const { darkMode, setPreference } = useApplicationPreferences()

    const darkModeToggle = computed({
      get: () => {
        return darkMode.value
      },
      set: async (val) => {
        await setPreference({ darkMode: val })
      },
    })

【讨论】：

糟糕，我没有看到你的答案。无论如何，我在回答中为您的问题提供了其他解决方案。希望能帮助到你。顺便说一句，我不知道用异步函数创建一个可写的计算是否是个好主意。这是可能的，但为了您的心理健康，我会避免此类事情，因为它可能会导致不良影响。

【解决方案2】：

我认为您有三种选择来完成此操作，您应该选择适合您风格的一种。

1.使 ref 可写。

这是最简单的一个，我认为你想错了。您正在创建一个只允许通过computed 直接读取ref 但您的意图相反的组合。您真的想要一个 opened 可写给所有可以访问 (v-model) 的 ref。

2。使用计算的 get/set。

这是一个选项，但它与打开的ref 并没有太大区别。 https://composition-api.vuejs.org/api.html#computed

const state = reactive({ on: false })

const myComputed = computed({
  get () {
    return state.on
  },

  set (value) {
    state.on = value
  }
})

3.解构v-model 指令。

您可以将 v-model 指令解构为 value 绑定和 input 事件。示例：

<Toggle :value="myComputed" @input="setPreference" />

https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

【讨论】：