Programing

Nuxt + Vuex mapGetters 값은 항상 정의되지 않음

c10106 2022. 4. 9. 09:49
반응형

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

반응형