페이지를 로드할 때 Nuxt JS Vuex 설정 데이터가 실시간으로 반영되지 않음

페이지를 로드할 때 Nuxt JS Vuex 설정 데이터가 실시간으로 반영되지 않음

Nuxt JS 2.9 어플리케이션에서는 Vuex를 사용하여 데이터를 저장하고 레이아웃을 검색합니다.Vuex 스토어에 페이지 단위로 데이터를 설정하고 있습니다.데이터는 정상적으로 동작하고 있습니다만, 새로운 페이지의 페이지를 갱신하지 않으면 오래된 데이터가 표시됩니다.

예를 들어, 홈페이지에서 다음과 같이 설정합니다.

mounted () {
  this.$store.commit('toolbar/setToolbar', {
    name: 'Homepage'
  })
}

[설정(Settings)]페이지에서 다음을 수행합니다.

mounted () {
  this.$store.commit('toolbar/setToolbar', {
    name: 'Settings'
  })
}

이것은 다음과 같이 Vuex에 들어갑니다.

export const state = () => ({
  toolbarData: [{
    name: 'Homepage'
  }]
})

export const mutations = {

  /*
   * Toolbar data
   */
  setToolbar (state, data) {
    const settings = {
      name: data.name != null ? data.name : ''
    }

    state.toolbarData[0] = settings
  }

}

그리고 홈페이지와 설정 페이지를 바꾸면 상태는 갱신되지만, 내 페이지에는 실시간으로 반영되지 않습니까?

mounted로로 합니다.created ★★★★★★★★★★★★★★★★★」beforeCreate스토어에 커밋해서 페이지가 로드되기 전에 준비되기를 바라면서?

이것은 Vue의 반응성에 관한 경고 중 하나입니다.자세한 것은, https://vuejs.org/v2/guide/reactivity.html 를 참조해 주세요.

문제를 해결하려면 어레이 전체를 교환할 수 있습니다.

setToolbar (state, data) {
    const settings = {
      name: data.name != null ? data.name : ''
    }

    state.toolbarData = [settings]
  }

또는 설정할 대상만 설정합니다.

import Vue from 'vue';

etToolbar (state, data) {
    const settings = {
      name: data.name != null ? data.name : ''
    }

    Vue.set(state.toolbarData, 1, settings);
  }

언급URL : https://stackoverflow.com/questions/63808535/nuxt-js-vuex-setting-data-not-reflected-in-real-time-when-loading-page