일반적인 Vue 문제 해결 — 목록 필터링, 전역 라이브러리, Vuex 등

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

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

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

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

Vue 구성 요소의 필터링 목록

목록을 필터링하는 적절한 방법은 계산된 속성을 사용하는 것입니다.

이는 계산된 속성이 v-for가 실행되기 전에 값을 반환하기 때문입니다.

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

computed: {
  filteredItems() {
    return this.items.filter(item => item.type.toLowerCase().includes(this.search.toLowerCase()))
  }
}

필터링 논리를 filterItems 계산된 속성에 넣습니다.

그런 다음 다음과 같이 작성하여 계산된 속성을 반복할 수 있습니다.

<div v-for="item of filteredItems" >
  <p>{{item.name}}</p>
</div>

filteredItems 계산된 속성을 템플릿에 변수로 전달합니다.

Vue 구성 요소에서 HTTP 호출하기

Fetch API 또는 Axios와 같은 타사 HTTP 클라이언트 라이브러리를 사용하여 Vue 구성 요소에서 HTTP 호출을 만들 수 있습니다.

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

methods: {
  async getData(){
    const res = await fetch('/some/url')
    const data = await res.json();
    this.data = data;
  }
}

fetch는 약속을 반환하므로 async 및 await를 함께 사용할 수 있습니다.

URL에서 해시 제거

히스토리 모드를 사용하여 Vue Router에서 생성된 URL에서 해시를 제거할 수 있습니다.

활성화하기 위해 다음과 같이 작성할 수 있습니다.

const router = new VueRouter({
  mode: 'history'
})

해시를 제거할 수 있도록 mode를 'history'로 설정합니다.

소품 변경사항 듣기

감시자를 사용하여 소품 변경 사항을들을 수 있습니다.

소품에 대한 감시자를 추가하려면 watch 속성에 메서드를 추가할 수 있습니다.

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

{
  ...
  `props: ['myProp'],
  watch: {
    myProp(newVal, oldVal) {
      console.log(newVal, oldVal)
    }
  }
  ...
`}

watch 속성 값으로 표시되는 myProp 속성과 props 속성이 있습니다.

우리는 각각 새 값과 이전 값을 취하는 서명을 사용하여 prop과 동일한 이름을 가진 메서드를 만듭니다.

그런 다음 새 값을 얻기 위해 newVal 값을 얻고 이전 값을 얻기 위해 oldVal 값을 얻습니다.

prop 값이 설정되었을 때 즉시 시청을 시작하려면 immediate 속성을 추가하고 true 로 설정할 수 있습니다.

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

watch: {
  myProp: {
    immediate: true,
    handler (val, oldVal) {
      // ...
    }
  }
}

모든 구성 요소 간의 통신

this.$dispatch 메서드를 사용하여 모든 구성 요소 간에 통신하여 모든 구성 요소에 전파되는 이벤트를 전달할 수 있습니다.

그런 다음 this.$on를 사용하여 this.$dispatch에 의해 전달된 이벤트를 수신할 수 있습니다.

예를 들어 하나의 구성 요소에 다음을 작성할 수 있습니다.

export default {
  ...
  `created() {
    this.$dispatch('child-created', this)
  }
  ...
}`

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

export default {
  ...
  `created() {
    this.$on('child-created', (child) => {
      console.log(child)
    })
  }
  ...
}`

created 후크에서 이벤트를 내보내므로 구성 요소가 생성되었지만 DOM 콘텐츠가 아직 로드되지 않았을 때 이벤트가 발생합니다.

두 번째 구성 요소에서는 구성 요소 코드가 로드되는 즉시 이벤트를 수신할 수 있도록 created 후크에 이벤트 리스너를 추가합니다.
child-created는 이벤트 이름입니다.
child 매개변수는 $dispatch 의 두 번째 인수에 이벤트 데이터가 있습니다.

Vue 앱에서 전역적으로 Axios 사용하기

Axios를 전역적으로 사용할 수 있도록 하려면 Vue.prototype 인스턴스를 생성하기 전에 Vue 속성으로 설정할 수 있습니다.

이렇게 하면 Vue 인스턴스를 생성하면 Vue 인스턴스와 함께 반환됩니다.

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

import Axios from 'axios'

Vue.prototype.$http = Axios;

그런 다음 구성 요소에서 this.$http 변수를 사용하여 액세스할 수 있습니다.

예를 들어 get 요청을 하려면 다음과 같이 작성할 수 있습니다.

this.$http.get('https://example.com')

Vuex 액션 대 돌연변이

Vuex 변형은 이름과 핸들러를 사용하는 동기 코드입니다.

상태를 업데이트하는 데 사용됩니다.

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

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

그런 다음 state.count++는 count 작업을 전달할 때 'increment' 상태를 업데이트합니다.

작업은 돌연변이와 비슷하지만 여러 돌연변이를 전달할 수 있습니다.

비동기식일 수도 있습니다.

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

incrementBy({ dispatch }, amount) {
  dispatch('INCREMENT', amount)
}

dispatch 함수는 돌연변이를 발송하는 함수입니다.

결론

Vuex 액션과 돌연변이 사이에는 차이점이 있습니다.

항목을 필터링하려면 계산된 속성에서 수행해야 합니다.

전 세계적으로 사용할 수 있도록 Vue.prototype 항목을 넣을 수 있습니다.