Javascript 突变和getter之间的丢失状态-Vuex/Nuxt

我尝试根据单击的按钮的状态来渲染组件（

navBar.vue

）

我用正确的数据看到了操作和突变，但我无法让getter检索

pageVisible

（应该是

perso-page

或

结果页

）的状态。 它是：

• 未定义
• 什么都没有（没有console.log）

我尝试了很多选项，比如设置一些

异步等待

，但都没有成功。我确信这是一件显而易见的事情，但我无法准确指出原因

请告诉我如何在getter中获得正确的状态，并在

page.vue上调用它（目前它不会呈现任何内容，但这不是问题的重点）

谢谢大家!

page.vue

actions.js

js

getters.js

您正在使用命名模块吗？
<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>

<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)
    }
  }
}

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,

})

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

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

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