vuex 스토어가 업데이트되어도 Nuxtjs 페이지가 업데이트되지 않음

vuex 스토어가 업데이트되어도 Nuxtjs 페이지가 업데이트되지 않음

내 코드는 다음과 같습니다.

~/store/state.js

export default () => ({
    selectLanguage: 'fr'
  })

~ / store / actions . ~ ~

export default {
    switchToFr (context) {
      context.commit('switchToFr')
    },
    switchToEn (context) {
      context.commit('switchToEn')
    }
  }

~/store/module.displays

export default {
  switchToFr (state) {
    state.selectLanguage = 'fr'
  },
  switchToEn (state) {
      state.selectLanguage = 'en'
  }
}

~/crypto/crypto.js

<b-dropdown-item :value="'fr'" @click="$store.dispatch('switchToFr')" aria-role="listitem">
                <div class="media">
                    <img width='30px' height='30px' src="~/assets/img/icons8-france-48.png"/>
                    <div class="media-content">
                        <h3>Français</h3>
                    </div>
                </div>
            </b-dropdown-item>

            <b-dropdown-item :value="'en'" @click="$store.dispatch('switchToEn')" aria-role="listitem">
                <div class="media">
                    <img width='30px' height='30px' src="~/assets/img/icons8-great-britain-48.png"/>
                    <img width='30px' height='30px' src="~/assets/img/icons8-usa-48.png"/>
                    <div class="media-content">
                        <h3>English</h3>
                    </div>
                </div>
            </b-dropdown-item>

data () {
    return {
      activeLanguage: this.$store.state.selectLanguage,
    }
  },
  watch: {
    activeLanguage: function() {
      console.log(this.activeLanguage)
    }
  },

~/pages/http.html

data () {
    return {
      activeLanguage: this.$store.state.selectLanguage,
    }
},

watch: {
    activeLanguage: function() {
      console.log(this.activeLanguage)
    }
},

문제:

layout.js에서는 언어를 바꾸면 데이터 activeLanguage가 변경되어 워치가 새로운 값의 console.log를 수행합니다.

->괜찮아

project.js에서는 동작하지 않습니다.데이터에 새로운 스토어 값을 입력하기 위해 페이지를 변경한 후 다시 돌아와야 합니다.

->나쁘다

project.js를 어떻게 해야 하는지 아는 사람 있나요? layout.js와 같은 컴포넌트를 가지려면?감사합니다!

놀랍다activeLanguage에서 당신을 위해 바뀌었습니까?layout.js.그data함수는 컴포넌트가 생성되고 문자열이 불변할 때 한 번만 실행되므로 예상하지 못했습니다.activeLanguage에layout.js그 때 집어들다selectLanguage스토어 값이 변경되었습니다.

상태 값을 취득해야 합니다.computed대신 Vuex 문서에서 권장하는 대로 작동합니다.

다음과 같은 방법으로 효과를 볼 수 있습니다.

  computed: {
    activeLanguage () {
      return this.$store.state.selectLanguage
    }
  }

쇼트 버전에 대해서는, 을 참조해 주세요.

언급URL : https://stackoverflow.com/questions/62196509/nuxtjs-pages-are-not-updated-even-if-the-vuex-store-is-updated