새로고침으로 인해 빈 상태가 반환되는 이유는 무엇입니까?

새로고침으로 인해 빈 상태가 반환되는 이유는 무엇입니까?

Nuxt 2.5에서 취미 프로젝트를 위한 웹샵을 만들고 있습니다.Vuex 스토어에는 "currentCart" 상태의 모듈이 있습니다.ID와 제품 배열이 있는 오브젝트를 여기에 저장합니다.백엔드에서 ID를 사용하여 카트를 가져오고 쿠키에 저장됩니다(js-cookie).

백엔드에서 카트를 가져오려면 nuxtServerInit을 사용합니다.그리고 나서 주(州)에 보관합니다.그런 다음 컴포넌트에서 상태를 가져와 카트에 있는 기사 수를 표시하려고 하면 카트가 null이면 "0"으로 표시됩니다.그러면 이상한 결과가 나옵니다.대부분의 경우 제품 수가 올바르게 표시되지만 Vuex 개발 도구를 통해 카트는 null로 표시됩니다.나머지 절반은 "0"으로 표시됩니다.

처음에는 카트를 설치하는 동작을 실행하는 미들웨어를 가지고 있었습니다.이것은 전혀 일관되게 작동하지 않았다.그 후 nuxtServerInit로 스토어를 설정하려고 했습니다만, 실제로 정상적으로 동작했습니다.내가 뭔가 바꾼 것 같아. 왜냐하면 오늘은 그 문제가 설명되기 때문이야.나는 그것이 왜 이 문제를 발생시키는지 알 수 없다.

nuxtServerInit:

nuxtServerInit ({ commit }, { req }) {
  let cartCookie;

  // Check if there's a cookie available
  if(req.headers.cookie) {

    cartCookie = req.headers.cookie
    .split(";")
    .find(c => c.trim().startsWith("Cart="));

    // Check if there's a cookie for the cart
    if(cartCookie)
      cartCookie = cartCookie.split("=");
    else
      cartCookie = null;
  }
  // Check if the cart cookie is set
  if(cartCookie) {

    // Check if the cart cookie isn't empty
    if(cartCookie[1] != 'undefined') {
      let cartId = cartCookie[1];

      // Get the cart from the backend
      this.$axios.get(`${api}/${cartId}`)
      .then((response) => {
        let cart = response.data;
        // Set the cart in the state
        commit("cart/setCart", cart);
      });
    }
  }
  else {
    // Clear the cart in the state
    commit("cart/clearCart");
  }
},

변환:

setCart(state, cart) {
  state.currentCart = cart;
}

취득자:

currentCart(state) {
  return state.currentCart;
}

카트에 있다.vue:

if(this.$store.getters['cart/currentCart'])
  return this.$store.getters['cart/currentCart'].products.length;
else
  return 0;

상태 개체:

const state = () => ({
  currentCart: null,
});

console.logs는 어디에 문제가 있는지 확인하기 위해 곳곳에 배치되어 있습니다.nuxtServerInit은 동작하고 커밋 "cart/setCart"가 기동되어 적절한 콘텐츠가 있습니다.게터에서는, 대부분의 경우 무효가 됩니다.다시 새로고침한 후 페이지를 빠르게 새로고침하면 올바른 카트가 게터에 표시되고 컴포넌트가 올바른 카운트를 얻습니다.Vue dev 툴은 컴포넌트에 필요한 데이터가 표시되어도 현재 Cart 상태는 null이라고 표시됩니다.

상태 개체를 "currentCart: {}"로 변경했는데 지금은 대부분 작동하지만 새로고침 3/4마다 빈 개체가 반환됩니다.따라서 상태가 nuxtServerInit에 의해 설정되는 동안 getter는 상태가 설정되기 전에 부팅됩니다.그래요?그렇다면 그 이유와 변경 방법은 무엇입니까?

내가 이해하지 못하는 게 뭐야?난 완전히 혼란스러워.

Stackoverflow에 문제를 입력해 질문한 후 새로운 아이디어를 낸다는 것을 알고 계십니까?이게 그 중 하나였어

상태 개체를 빈 개체로 변경했을 때 빈 개체가 반환될 수 있음을 알려주기 위해 질문을 편집했습니다.그런 다음 getter가 nuxtServerInit보다 먼저 부팅되는 경우가 있습니다.문서에는 다음과 같이 기술되어 있습니다.

주의: 비동기 nuxtServerInit 액션은 Promise를 반환하거나 비동기/대기 기능을 사용하여 nuxt 서버가 대기하도록 해야 합니다.

nuxtServerInit을 다음과 같이 변경했습니다.

async nuxtServerInit ({ commit }, { req }) {
  ...
  await this.$axios.get(`${api}/${cartId}`)
  .then((response) => {
    ...
  }
  await commit("cart/clearCart");

이제 Nuxt는 결과를 기다릴 수 있습니다.Dev Tools는 아직 빈 상태로 표시되지만, 나머지 앱에서는 스토어 상태를 완벽하게 사용할 수 있기 때문에 버그라고 생각합니다.

서버가 결과를 기다리도록 합니다.

그 대답은 한마디로 요약하면 다음과 같다.

@Maurits와 같은 문제가 있었지만 파라미터가 조금 달랐습니다.하지 않습니다.nuxtServerInit()하지만 Nuxt의 페치 훅.어떤 경우에도 기본적으로 다음과 같은 생각이 있습니다.서버에서 데이터 수집이 완료될 때까지 기다려야 합니다.

여기 제 컨텍스트의 코드가 있습니다.Nuxt fetch 。.computed ★★★★★★★★★★★★★★★★★」mounted페치 훅이 들어가지 않는 것을 나타내는 데 도움이 됩니다.methods.

실패:

(브라우저 갱신에 관한 빈 페이지가 표시됨)

computed: {
    /* some stuff */
},

async fetch() {
    this.myDataGrab()
    .then( () => {
        console.log("Got the data!")
    })
},

mounted() {
    /* some stuff */
}

작업: 추가하는 것을 잊었습니다.await★★★★★★★★★★★★★★★★★!이제 서버는 페이지를 완료하고 전송하기 전에 이를 기다립니다.

async fetch() {
    await this.myDataGrab()
    .then( () => {
        console.log("Got the messages!")
    })
},

언급URL : https://stackoverflow.com/questions/55376329/why-does-a-reload-return-an-empty-state-half-of-the-time