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

Question

我们有一个可组合的函数 useApplicationPreferences() 在 Vue 2 中使用 Composition API。此函数公开了一个名为 darkMode:

的计算不可写 ref

//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().

来更改它的值

感谢您的帮助。

Answer 1

感觉这里有点傻。发布问题后，我在 Vue docs:

中找到 get 和 set a computed 属性的选项

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

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

Answer 2

我认为你有三种选择来完成这个，你应该选择适合你风格的一种。

1.使 ref 可写。

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

的人

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

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

How to connect a mutable to an immutable reacitve object?

vue.js

vue-component

vuejs2

vue-composition-api