如何在Vuejs3的setup函数中观察计算值

Question

我正在开发一个Vue项目与Vuex和Vue 3。我的代码有个严重的问题。

<template>
<div class="px-2 pt-3 text-left">
<div class="flex justify-between items-center">
<h3 class="text-red-700 font-bold text-sm">Texts</h3>
</div>
<div class="mt-4">
<p class="text-sm">Title</p>
<div class="flex items-center border">
<input
v-model.lazy="introSlide.title"
class="
rounded
mb-0
py-2
px-2
focus:outline-none
text-sm
w-full
text-grey-darker
"
placeholder="Enter Title"
/>
</div>
</div>
<div class="mt-4">
<p class="text-sm">Subtitle</p>
<div class="flex items-center border">
<textarea
v-model.lazy="introSlide.subTitle"
class="
rounded
mb-0
py-2
px-2
focus:outline-none
text-sm
w-full
text-grey-darker
min-h-max
h-32
"
placeholder="Presenter Information"
/>
</div>
</div>
<hr />
<div class="flex justify-between items-center mt-6">
<h3 class="text-red-700 font-bold text-sm">Images</h3>
</div>
<div class="mt-4">
<p class="text-sm">Company Logo</p>
<div class="flex items-center border">
<label
class="
flex flex-col
items-center
rounded-lg
tracking-wide
cursor-pointer
border-dashed border-2
w-40
"
:class="introSlide.logo ? '' : 'px-14 py-6'"
>
<input
id="logo_upload"
ref="imgInput"
class="hidden"
type="file"
accept="image/*"
name="logo_upload"
@input="pickFile($event.target.files)"
/>
<img
v-show="introSlide.logo"
:src="`${introSlide.logo}`"
class="rounded-lg w-40 h-24 object-cover"
/>
</label>
<button @click="presentations">testest</button>
</div>
</div>
</div>
</template>

<script>
import introSlideDefault from '@/data/slideContent/introSlide.js'
import { mapMutations } from 'vuex'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { ref, watch, computed } from 'vue'

export default {
setup() {
const store = useStore()
const route = useRoute()

let draftPayload = {
presentationId: route.params.presentationId,
prePopulatedSlide: route.params.slideId,
}
const slideContent = computed(() =>
store.getters['rfps/getslideContentBySlideId'](draftPayload),
)
let introSlide = ref(JSON.parse(JSON.stringify(introSlideDefault)))
const introSlide = computed(() => {
if (slideContent.value == null) {
let introSlideTest = ref({
title: '',
subTitle: '',
logo: '',
})
return introSlideTest
} else {
let draftContent = ref(JSON.parse(slideContent.value.draftSlideContent))
let introSlideTest = {
title: draftContent.value.title,
subTitle: draftContent.value.subTitle,
logo: draftContent.value.logo,
}
return introSlideTest
}
)

watch(
() => introSlide,
(introSlide) => {

store.commit('rfps/setIntroSlide', introSlide.value)
let updateDraftPayload = {
content: JSON.stringify(introSlide.value),
presentationId: route.params.presentationId,
slideId: slideContent.value.slideId,
version: slideContent.value.version,
}
store.dispatch('rfps/updateDraft', updateDraftPayload)
},

{ deep: true },
{ immediate: false },
)
return {
introSlide,
slideContent,
}
},
</script>

如果我观察任何ref值，例如:

let introSlide = ref({
title: '',
subTitle: '',
logo: '',
})

我可以观察v-model的变化，但如果我使用计算值，我就不能观察它。我需要用getter获取数据然后用v-model

观察它的变化

Answer 1

您需要更详细地说明获取值

const slideContent = computed(() =>
store.getters['rfps/getslideContentBySlideId'](draftPayload).specifyAttribute,
)