반응형
Nuxt + Vuex mapGetters 값은 항상 정의되지 않음
나는 Nuxt와 함께 VueX를 사용하고 있다.JS 그러면 파일에 다음 코드가 있다고 가정해 봅시다.store/search.js
:
export const state = () => ({
results: null
});
export const mutations = {
setResults(state, { results }) {
state.results = results;
}
};
export const actions = {
startSearch({ commit, dispatch }, { type, filters }) {
commit("setResults", { type, filters });
}
};
export const getters = {
results: state => state.results
};
이제 내 컴포넌트에results.vue
계산된 속성 아래 다음과 같은 것이 있다.
<template>
<button @click="handleSearch">Search</button>
<div v-if="results && results.length" class="results" >
<div v-for="item in results" :key="item.id">
{{item}}
</div>
</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
data() {
return {
selected_type: null,
filters: null
};
},
methods: {
setType(type) {
this.selected_type = type;
this.handleSearch();
},
setFilters(filters) {
this.filters = filters;
},
handleSearch() {
this.startSearch({ type: this.selected_type, filters: this.filters });
},
...mapActions("search", {
startSearch: "startSearch"
})
},
computed: {
...mapGetters("search", {
results: "results"
})
}
</script>
제 질문은, 왜 그런일이 일어났는지 입니다.item
(템플릿 섹션의) for 루프에서 항상 정의되지 않은 상태로 반환하시겠습니까?
대답해줘서 정말 고마워.
지금까지 알아낸 것은: 계산된 것은 배열이어야지, 그렇게 사물이 되어서는 안 된다는 것이다.
...mapGetters("search", [
"results"
]
// Now results is populated.
참조URL: https://stackoverflow.com/questions/60158376/nuxt-vuex-mapgetters-value-is-always-undefined
반응형
'Programing' 카테고리의 다른 글
구성 요소가 리듀렉스 저장소에 연결되지 않는 이유 (0) | 2022.04.09 |
---|---|
Typecript 3.7@베타(선택 사항) 문제를 사용하는 체인 작업자 (0) | 2022.04.09 |
형식 지정자가 클래스의 인터페이스 속성을 자동으로 가져오기 (0) | 2022.04.09 |
Vue 라우터를 사용할 때 VueJS 구성 요소 간에 데이터를 전달하는 방법 (0) | 2022.04.09 |
'슬롯 액티베이터'는 시각화에서 어떻게 작동하는가? (0) | 2022.04.09 |