일반적인 Vue 문제 — 상태 업데이트, Vuex 및 이벤트 처리기

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Vue.js를 사용하면 프런트 엔드 앱을 쉽게 개발할 수 있습니다. 그러나 여전히 문제가 발생할 가능성이 있습니다.

이 기사에서는 몇 가지 일반적인 문제를 살펴보고 해결 방법을 알아보겠습니다.

Vue.js에서 v-on에 이벤트 및 인수 전달

Vue의 v-on 지시문에서 호출한 메서드에 인수를 전달할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

<input type="number" v-on:input="addToCart($event, item.id)" min="0" placeholder="0">

우리의 템플릿에서.

그런 다음 구성 요소에서 다음을 작성할 수 있습니다.

methods: {
  addToCart(event, id){
    console.log(id)
  }
}

$event에는 input 이벤트에서 방출된 개체가 있습니다.
id에는 템플릿 코드로 전달한 item.id가 있습니다.

nextTick의 목적

nextTick 데이터를 변경한 후 무언가를 할 수 있습니다.

일반 JavaScript의 setTimeout와 같습니다.
nextTick는 데이터 변경 사항의 변경 사항을 감지하므로 데이터가 업데이트된 후에 항상 실행됩니다.
setTimeout는 그것을 알지 못합니다.

예를 들어 다음이 있는 경우:

<template>
  <div>
    {{ val }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      val: 1
    }
  },
  mounted() {
    this.val = 2;

    this.$nextTick(() => {
      this.val = 3;
    });
  }
}
</script>

this.val의 초기 값은 1입니다.

그런 다음 mounted 후크가 호출되고 업데이트this.val가 2입니다.

해당 업데이트가 완료되면 Vue가 3으로 업데이트this.val합니다.

$mount()와 $el의 차이점

$mount 필요할 때 Vue 인스턴스를 명시적으로 마운트할 수 있습니다.

이를 통해 특정 요소가 존재할 때까지 Vue 인스턴스를 지연할 수 있습니다.

이것은 DOM을 조작하여 요소가 추가되는 레거시 앱에 Vue를 추가하는 데 유용합니다.
el는 Vue 인스턴스가 존재하는지 여부를 먼저 확인하지 않고 DOM에 바로 마운트합니다.

따라서 인스턴스를 정적 ​​요소에 마운트하거나 Vue 인스턴스보다 먼저 로드되는 것으로 알고 있는 항목에 유용합니다.

[Vue 경고]: 요소를 찾을 수 없음

이 오류는 Vue가 컴포넌트를 마운트하기 위해 주어진 선택으로 요소를 할 수 없음을 의미합니다.

예를 들어 다음이 있는 경우:

const main = new Vue({
  el: '#main',
  data: {
    hello: 'home'
  }
});

그러면 ID가 main인 요소를 찾을 수 없습니다.

이를 수정하려면 Vue 인스턴스를 생성하기 전에 요소가 로드되었는지 확인해야 합니다.

예를 들어 다음과 같이 작성할 수 있습니다.

window.onload = () => {
  const main = new Vue({
    el: '#main',
    data: {
      hello: 'home'
    }
  });
}

또는 다음과 같이 작성할 수 있습니다.

window.addEventListener('load', () => {
  // add the same Vue instance as the previous example
})

둘 다 주어진 요소가 DOM에 있는 후 Vue 인스턴스를 마운트할 수 있도록 합니다.

초기 Vue.js 로드 시 모든 서버 측 데이터 로드

Vue 인스턴스를 생성하기 전에 Vue를 로드하는 자체 함수를 작성하여 데이터를 Vuex 저장소에 로드할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const store = (data) => {
  return new Vuex.Store({
    state: {
      exams: data,
    },
    actions,
    getters,
    mutations,
  });
}

fetch('/some/url')
  .then(response => response.json())
  .then((data) => {
    new Vue({
      el: '#app',
      router,
      store: store(data),
      template: '<App/>',
      components: { App },
    });
  });

store 로 스토어를 생성하는 기능이 있습니다.

그런 다음 store 생성자에 전달한 객체에서 Vue 함수를 호출합니다.
data에 전달한 store는 fetch 함수 호출에서 가져온 것입니다.

이렇게 하면 데이터가 저장소로 이동하기 전에 저장소에 채워집니다.

Vue CLI 프로젝트로 SASS 또는 SCSS 가져오기

node-sass 및 sass-loaer 패키지를 추가하여 Vue CLI로 만든 Vue 앱으로 SASS 또는 SCSS를 가져올 수 있습니다.

그런 다음 코드에서 SCSS 파일을 로드할 수 있습니다.

패키지를 설치하려면 다음을 실행합니다.

npm install -D node-sass sass-loader

그러면 다음과 같이 작성할 수 있습니다.

import './styles/my-styles.scss'

스타일을 전역으로 가져오려면 main.js  .

파일에서 SASS 또는 SCSS 파일을 가져오려면 다음을 작성합니다.

<style lang="scss">
  ...
</style>

Vue가 SCSS 코드를 인식하도록 추가합니다.

결론

기존 프로젝트에서 SASS 또는 SCSS 코드를 사용하려면 SASS 로더 패키지를 사용할 수 있습니다.

Vue 앱을 로드하기 전에 데이터를 Vuex 스토어에 로드하려면 데이터를 로드한 다음 데이터로 Vuex 스토어를 생성할 수 있습니다.

그런 다음 스토어로 Vue 인스턴스를 생성할 수 있습니다.

이벤트 핸들러에 무엇이든 전달할 수 있습니다.
nextTick는 다른 업데이트 후에 상태를 업데이트하는 데 유용합니다.