У нас есть составная функция 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
из составного объекта к darkModeToggle
ref в шаблоне Settings.vue
? Вычисленное свойство darkMode
недоступно для записи. но переключатель должен использовать его как значение и иметь возможность изменять его значение, вызывая setPreference()
.
Спасибо за помощь.