Vuex Getter가 정의되지 않음

Vuex Getter가 정의되지 않음

Vue.js는 처음이라 Vuex 모듈과 Axios에 문제가 있습니다.라우터에서 slug를 가져와 Axios로 데이터를 가져오는 "post" 컴포넌트가 있습니다.이 컴포넌트는 Vuex Getters로 취득됩니다.

데이터를 성공적으로 검색할 수 있지만 DevTools에 "TypeError: Unread property 'name' of undefined"라는 오류가 표시됩니다.

이 오류로 인해 나는 합격할 수 없다.this.post.nameVue-Meta로 이동합니다.

코드

Post.vue

  computed: {
    ...mapGetters(["post"]),
  },

  mounted() {
    const slug = this.$route.params.slug;
    this.fetchPost({ slug: slug });
  },

  methods: {
    ...mapActions(["fetchPost"]),

/store/module/post.module

const state = {
  post: [],
};

const getters = {
  post: (state) => {
    return post;
  }
};

const actions = {
  async fetchPost({ commit }, arg) {
    try {
      await axios.get("/post/" + arg.slug).then((response) => {
        commit("setPost", response.data);
      });
    } catch (error) {
      console.log(error);
    }
  },
};

const mutations = {
  setPost: (state, post) => (state.post = post),
};

export default {
  state,
  getters,
  actions,
  mutations,
};

당신의 getter는 완전히 틀렸다: state getter는 전체를 받아들이는 함수여야 한다.state관심 있는 것을 검색해내는 매개 변수입니다.사용자 버전...

const getters = {
  post: (state) => {
   return post;
  }
};

...를 받아들이다state파라미터로 사용하지만 사용하지 않습니다.대신 변수(post이 컨텍스트에서는 정의되어 있지 않습니다.
언제나 돌아올거야undefined의 현재 값에 관계없이)state.post.
그리고 이미 알고 있듯이 JavaScript는 속성에 액세스할 수 없습니다.'name'의undefined.

현재 값을 가져오려면state.post, 사용방법:

const getters = {
  post: state => state.post
}

또는

const getters = {
  post: (state) => { return state.post; }
}

괄호만 잘 치면...

또한 원칙적으로 빈 객체로 게시물을 초기화할 것을 권장합니다.{}빈 배열 대신[]변수 유형을 가능한 한 적게 변경하는 것은 매우 좋은 코딩 습관으로 장기적으로 큰 이점을 제공합니다.

---

편집([mcve] 이후)

더 큰 문제가 있습니다: Axios 플러그인에서 가져오면 반환됩니다.undefined그래서 전화를 할 수 없다.get왜냐면 당신이 그 전화를 한 번에 묶어서try/catch블록, 에러는 표시되지 않지만 엔드포인트는 호출되지 않습니다.
당신이 어디서 플러그인 구문을 선택했는지 모르겠지만, 확실히 악리를 내보내지 않고 있습니다.Import의 치환하다import axios from 'axios'정상적으로 동작합니다.

또 다른 조언은 하는 것이다.namespace당신의 매장 모듈.이 기능은 여러 개의 모듈을 사용하여 특정 모듈의 특정 변환/액션을 구체적으로 참조할 때 유용합니다.옷 좀 갈아입으셔야겠습니다.mapActions그리고.mapGetters그 시점에서.

여기서 동작하는 것을 봐.

언급URL : https://stackoverflow.com/questions/62398210/vuex-getter-undefined