컴포넌트 method()에서 Vuex $store.getters에 액세스합니다.

컴포넌트 method()에서 Vuex $store.getters에 액세스합니다.

Vuex 및 Vuetify를 사용하여 드롭다운을 비동기적으로 입력하려고 합니다(https://vuetifyjs.com/components/selects)).문제는 method()를 사용하여 $store에 접속할 수 없다는 것입니다.물론 computed()만 가능합니다.

다음은 나의 주/도입니다.

loadedTours:Array[9]
0:Object
1:Object
2:Object
3:Object
4:Object
5:Object
6:Object
7:Object
8:Object
9:Object

computed()에서 v-for를 사용하여 반환할 수 있습니다.

tours () {
    return this.$store.getters.loadedTours
},

다음은 목록이 data() 내에 있는 경우에만 기능하는 메서드()입니다.

methods: {
    querySelections (v) {
        this.loading = true
            setTimeout(() => {
                this.items = this.tours.filter(e => {
                    return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
                })
            this.loading = false
        }, 500)
    }
}

결과는 각 개체에 나열된 둘러보기 제목을 반환합니다.

현재 솔루션:

created()가 추가되었습니다.

created () {
    this.loadedTours = this.$store.getters.loadedTours
},

method()가 다음으로 변경되었습니다.

querySelections (v) {
    let that = this; 
    setTimeout(() => {
        that.items = that.loadedTours
    }, 500)
}

데이터 속성에서 화살표 기능을 삭제.

이제 tourTitle을 반환하고 입력으로 필터링해야 합니다.

제가 댓글에 언급했던 것 외에, 당신의 주된 오류는 아마도 당신이 사용하고 있기 때문일 것입니다.this화살표 함수 안에 있습니다.왜냐하면this오른쪽(vuejs) 컨텍스트를 참조하지 않습니다.

매뉴얼에서 다음 항목을 참조하십시오.

데이터 속성과 함께 화살표 함수를 사용하면 안 됩니다(예: data: () => {return { a: this.myProp }}).그 이유는 화살표 함수가 상위 컨텍스트를 바인딩하기 때문에 이 인스턴스는 예상대로 Vue 인스턴스가 아니며 이 인스턴스는 정의되지 않기 때문입니다.

대신 다음과 같은 작업을 수행합니다.

  let that = this; 
  setTimeout(() => callback(that.name), 15); 

지금이다,thatvuej 사용을 참조합니다.this물건

언급URL : https://stackoverflow.com/questions/47692003/access-vuex-store-getters-in-component-method