일반적인 Vue 문제 해결 — 목록 필터링, 전역 라이브러리, Vuex 등
5384 단어 vueprogrammingjavascriptwebdev
지금 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
항목을 넣을 수 있습니다.
Reference
이 문제에 관하여(일반적인 Vue 문제 해결 — 목록 필터링, 전역 라이브러리, Vuex 등), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/solving-common-vue-problems-list-filtering-global-libraries-vuex-and-more-2j4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)