저장소의 데이터에 어레이의 Vue.js 개체가 정의되지 않았습니다.

저장소의 데이터에 어레이의 Vue.js 개체가 정의되지 않았습니다.

이게 너무 뻔하다면 미안하지만, 나는 Vue에 처음이라서 도움이 좀 필요할 것 같아.

저장소에서 데이터(게시물) 어레이를 가져와 어레이 내의 객체 중 하나만 콘솔로그하려고 하는데 매번 정의되지 않은 상태로 표시됩니다.전체 어레이를 콘솔로그하면 정상으로 돌아갑니다.

생성된 후크에 console.log하기 전에 데이터가 로드되지 않은 것과 관련이 있는 것 같습니다.내가 할 수 있는 건 다 해봤는데 그게 날 미치게 해.도움에 감사드립니다(아래 간단한 코드).

<script>
        export default {
          components: {},

     computed: {
            posts() {
              return this.$store.state.posts;
            }
          },
          created() {
            this.$store.dispatch("getPosts");
           console.log(this.posts[0])
           },
        };
        </script>


//Store code Below

export const state = () => ({
      posts: [],
    })

    export const mutations = {
      updatePosts: (state, posts) => {
        state.posts = posts
      }
    }

    export const actions = {
      async getPosts({
        state,
        commit,
        dispatch
      }) {
        if (state.posts.length) return

        try {
          let posts = await fetch(
            `${siteURL}/wp-json/wp/v2/video`
          ).then(res => res.json())

          posts = posts
            .filter(el => el.status === "publish")
            .map(({
              acf,
              id,
              slug,
              video_embed,
              title,
              date,
              content
            }) => ({
              acf,
              id,
              slug,
              video_embed,
              title,
              date,
              content
            }))

          commit("updatePosts", posts)
        } catch (err) {
          console.log(err)
        }
      }
    }

콘솔 동작 설명

오브젝트 또는 어레이를 콘솔에 로그한 후 클릭하여 속성을 확장/표시하면 로그 시간이 아닌 클릭 시 현재 속성이 콘솔에 표시됩니다.따라서 로깅 후 변경된 경우 새 값이 표시됩니다.

개체와 배열은 참조 변수이므로 콘솔은 참조를 저장한 후 클릭하면 자동으로 업데이트됩니다.이는 개체와 어레이에만 해당됩니다.

반대로 콘솔에 프리미티브를 기록하면 로그 시점의 모습만 표시됩니다.

Chrome에서는 콘솔의 객체 옆에 파란색 정사각형도 표시됩니다.마우스를 올리면 "아래 값은 방금 평가되었습니다."라고 표시됩니다.

---

그렇기 때문에 아직 존재하지 않는 아이템이기 때문에 하나의 아이템을 로깅할 때 값을 볼 수 없습니다.그렇지만posts에는 항상 참조가 있습니다.빈 배열로 초기화되어 있기 때문입니다.그래서 로그인을 할 때posts참조: 클릭할 때 데이터가 도착합니다.

이것은 그것을 명확히 하기 위한 데모입니다.

비동기 함수가 아직 상태를 채우지 않았기 때문에 정의되지 않았습니다.비동기 데이터의 경우 항상 getter를 사용해야 합니다.

getter의 결과는 종속성에 따라 캐시되며 종속성의 일부가 변경된 경우에만 다시 캐시됩니다.

Vuex Getters

// Store
export const getters = {
    get_posts(state) {
        return state.posts;
    }
}

-

// component
computed: {
    posts() {
        return this.$store.getters['get_posts'];
    }
};

문서 https://vuex.vuejs.org/guide/actions.html#composing-actions에 따라 약속을 사용해야 합니다.액션은 데이터 취득 약속을 반환하지 않았으며, console.log 결과를 기록하기 전에 약속이 해결되기를 기다리지도 않았습니다.약속은 지켜야 할 매우 중요한 개념이다.여기 당신의 코드와 기본적으로 일치하는 예가 있는데, 저는 실제 가져오기 호출 대신 set Timeout을 사용했습니다.

const store = new Vuex.Store({
  state: {
    posts: []
  },
  getters: {
    itemList: (state) => {
      return state.items;
    }
  },
  mutations: {
    updatePosts: (state, posts) => {
      state.posts = posts
    }
  },
  actions: (actions = {
    async getPosts({ state, commit, dispatch }) {
      if (state.posts.length) {
        return Promise.resolve();
      }

      try {
        return new Promise(resolve => setTimeout(() => {
          const posts = [{ id: 42 }];
          commit("updatePosts", posts);
          resolve();
        }, 1000));
        
      } catch (err) {
        console.log(err);
      }
    }
  })
});

const app = new Vue({
  el: "#app",

  computed: {
    posts() {
      return this.$store.state.posts;
    }
  },
  created() {
    this.$store.dispatch("getPosts").then(() => console.log(this.posts[0]));
  },
  store
});

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@2.5.0/dist/vuex.js"></script>
<div id="app">
</div>

created() 훅에서 올바른 데이터를 가져오려면 데이터를 표시하기 전에 액션을 실행해야 합니다.

1. »created()비동기적으로 할 수 .

async created() {
    await this.$store.dispatch("getPosts");
    console.log(this.posts[0])
},

2. JavaScript Promise를 사용할 수 있습니다.

async created() {
    this.$store.dispatch("getPosts").then(()=> {
        console.log(this.posts[0]);
    });
},

언급URL : https://stackoverflow.com/questions/61011168/vue-js-object-in-array-undefined-in-data-from-store