상태 Vuex가 Nuxt.js 문제와 제대로 작동하지 않음

상태 Vuex가 Nuxt.js 문제와 제대로 작동하지 않음

내 Nuxt.js 앱에 상태 vuex를 설정하려고 하는데 제대로 작동하지 않아.그래서 여기 내 상태를 가져오기 방법으로 설정했다.

fetch({app, store, route}) {
    app.$axios.$get(`apps/${route.params.id}`)
      .then(res => {
        store.dispatch('setApp', {
          ...res,
          id: route.params.id
        })
        console.log(app.store.state.app);
      })
  }

app.store를 로깅할 때 데이터가 존재하지만 로그인하려고 할 때는 다음과 같이 모든 것이 올바르게 작동한다.

  created() {
    console.log(this.$store);
  },
  mounted() {
    console.log(this.$store);
  }

여기 내 상점 코드:

const store = () => new Vuex.Store({

  state: {
    app: ''
  },
  mutations: {
    'SET_APP' (state, payload) {
      state.app = payload
    }
  },
  actions: {
    setApp (ctx, payload) {
      ctx.commit('SET_APP', payload)
    }
  },
  getters: {

  }
})

나는 일을 하지 않는다. 내 주(州)가 비어 있어서 데이터가 내 템플릿에 렌더링되지 않는다. 나는 누군가가 나를 도와줬으면 좋겠다!

추신: 또한 클라이언트측에서 로그온할 때는 모든 것이 정상적으로 작동하지만 SSR에서는 (으)가 되지 않는다.

문서에 언급된 바와 같이

가져오기 방법을 비동기식으로 만들려면 Promise를 반환하고 Nuxt.js는 구성 요소를 렌더링하기 전에 약속이 해결될 때까지 기다리십시오.

위의 코드 예에서 공리 요청은 내부에서 이루어진다.fetch훅, 그러나 Nuxt는 그것이 해결되기를 기다리지 않을 것이다, 왜냐하면 약속은 반환되지 않기 때문에 그것은 구성 요소를 계속 렌더링하여 실행되기 때문이다.created그리고mounted호출 시점까지 채워지지 않은 후크$store.

잘 되려면, 약속을 돌려주어야 한다.fetch방법

앱에 추가 코드가 없는 경우 간단히 추가return성명서를 통해 이 문제를 해결할 수 있다:

fetch({app, store, route}) {
  return app.$axios.$get(`apps/${route.params.id}`)
    .then(res => {
      store.dispatch('setApp', {
      ...res,
      id: route.params.id
    })
    console.log(app.store.state.app);
  })
}

참조URL: https://stackoverflow.com/questions/53045871/state-vuex-dont-work-correctly-with-nuxt-js-problem