돌연변이와 게터 사이의 상태 손실 - Vuex/Nuxt

돌연변이와 게터 사이의 상태 손실 - Vuex/Nuxt

클릭한 단추의 상태를 기준으로 구성 요소를 렌더링하려고 함(navBar.vue).

올바른 데이터로 동작과 돌연변이를 볼 수 있지만 게이터가 상태를 검색할 수 없는 경우pageVisible(둘 중 하나여야 한다)perso-page또는result-page). 다음 중 하나이다.

• 정의되지 않은
• 전혀 없음(console.log 없음)

나는 몇 가지 설정과 같은 많은 옵션을 시도했다.async await그러나 정말로 성공한 것은 없었다.나는 그것이 명백한 것이라고 확신하지만 나는 그 이유를 정확히 말할 수 없다.

내가 어떻게 getter에서 정확한 상태를 얻을 수 있는지 보고 전화할 수 있는지 알려줘.page.vue(현재로서는 아무것도 렌더링하지 않지만, 이것이 이 질문의 요점은 아니다.)

고마워!

페이지뷰

<template>
  <div class="container-week">
    <NavBar></NavBar>
    <InputPerso v-if="pageVisible === 'perso-page'"></InputPerso>
    <Results v-else></Results>
  </div>
</template>

<script>
import NavBar from '../components/week-seven/NavBar'
import InputPerso from '../components/week-seven/personalised/InputPerso'
import Results from '../components/week-seven/Results'

export default {
  name: 'Week7',
  components: {
    NavBar,
    InputPerso,
    Results
  },
  data() {
    return {
      pageVisible: ''
    }
  },
  computed: {
    getCurrentPage() {
      return this.$store.getters.currentPage
    }
  }
}
</script>

NavBar.vue

<template>
  <div class="container">
    <ul class="container__links">
      <li>
        <button @click="setContentPage('perso-page')">
          Personalised
        </button>
      </li>
      <li>
        <button @click="setContentPage('result-page')">See result</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      pageVisible: 'perso-page'
    }
  },
  methods: {
    setContentPage(page) {
      this.$store.dispatch('pageDisplayed', page)
    }
  }
}

인덱스.js(스토어)

import actions from './actions'
import mutations from './mutations'
import getters from './getters'
import Vuex from 'vuex'

new Vuex.Store({
  state: () => ({
    pageVisible: 'perso-page'
  }),
  actions,
  mutations,
  getters,

})

actions.js

export const pageDisplayed = (context, payload) => {
  context.commit('PAGE_DISPLAYED', payload)
}

돌연변이.js

export const PAGE_DISPLAYED = (state, payload) => {
state.pageVisible = payload
}

getters.js.

export const currentPage = (state, payload) => {
return state.pageVisible
}

참조URL: https://stackoverflow.com/questions/66267390/lose-state-between-mutations-and-getters-vuex-nuxt