vue.js - 如何在 Vuejs3 的设置函数中查看计算值

Question

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

 <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>

如果我观看任何参考值，例如：

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

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

标签： vue.jsvuex

Answer 1

您需要更加指定才能获得价值

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