Mounted hook에서 내부의 로컬 값을 저장하는 방법 - Vue 3

Mounted hook에서 내부의 로컬 값을 저장하는 방법 - Vue 3

Vue 3의 Mounted hook에서 내부로부터 할당된 값을 저장하는 방법은 무엇입니까? 저장하려는 나의 의도는width그리고.height값은 을 사용하여 내부의 값을 조작할 수 있습니다.custom-directive의 밖에setup나중에 기능합니다.

나는 그것이 오직 내부에서만 조작이 가능하다는 것을 깨달았습니다.onMounted및 사용watch값에 변화가 있는지 확인합니다.하지만 그래도 값을 할당한 후에는 여전히undefined.

Vuex를 사용하는 것이 현재 솔루션을 구현하는 방법입니까?

내부의 DOM 속성에만 액세스할 수 있기 때문입니다.onMounted다른 곳이 아닌 후크.

<template>
  <div class="outer">
    <div class="container">
      <div>
        <div class="border">
          <img
            id="image"
            ref="image"
            src="@/assets/1.jpg"
            class="image"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted, watch } from "vue";

const widthVal = ref<number>()
const heightVal = ref<number>()

export default defineComponent({
  setup() {
    const image = ref<HTMLElement | null>(null)

    onMounted(() => {
      if (image.value) {
        widthVal.value = image.value.offsetWidth;
        heightVal.value = image.value.offsetHeight;

        console.log('width: ', widthVal.value)
        console.log('height: ', heightVal.value)
      }
    })

    watch([widthVal, heightVal], (newVal, oldVal) => {
      widthVal.value = newVal[0];
      heightVal.value = newVal[1];

      console.log(widthVal.value)
      console.log(heightVal.value)
    })  

    // becomes undedefined 
    console.log('width: ', widthVal.value)

    return { image }
  }
});
</script>

<style>
p {
  color: yellow;
}
.outer {
  margin: 1em;
  display: flex;
  justify-content: center;
  height: 100vh;
}
.container {
  background: rgb(98, 98, 98);
  border-radius: 5px;
  width: 950px;
  height: 650px;
  padding: 1em;
  overflow: hidden;
  font-family: "Trebuchet Ms", helvetica, sans-serif;
}
img {
  width: 950px;
  height: 650px;

  /* remove margins */
  margin-left: -18px;
  margin-top: -18px;
}
</style>

검사하는 경우widthVal내부가 아닌 내부 설정 »watch또는onMounted함수는 설정 내에서 할당이 발생하기 때문에 값이 할당되기 전에 호출됩니다.beforeCreate후크. 참조: 라이프사이클 후크

편집:

정말로 사용하려면widthVal/heightVal안에서.setup기능(또는 감시자, 필요한 것은 무엇이든) 내에서 사용하고 내부에서 호출할 것을 권장합니다.onMounted초기화한 후widthVal/heightVal예:

const doSomethingElse = () => {
  // Use widthVal and heightVal here...    
}

onMounted(() => {
  widthVal.value = newVal[0];
  heightVal.value = newVal[1];

  doSomethingElse();
})  
...

언급URL : https://stackoverflow.com/questions/71867493/how-to-save-local-values-from-inside-onmounted-hook-vue-3