javascript - 在突变和吸气剂之间失去状态 - Vuex / Nuxt

Question

我尝试根据单击按钮的状态（navBar.vue）呈现组件。

我看到了具有正确数据的动作和突变，但我无法让 getter 检索pageVisible（应该是perso-pageor result-page）的状态。它是：

• 不明确的
• 什么都没有（没有console.log）

我尝试了许多选项，例如设置一些选项，async await但没有一个真正成功。我确信这是一件显而易见的事情，但我无法确定原因。

如果您看到我如何在 getter 中获得正确的状态并调用它，请告诉我page.vue（现在它不会渲染任何东西，但这不是这个问题的重点）。

谢谢！

页面.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>

导航栏.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)
    }
  }
}

index.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,

})

动作.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
}

标签： javascriptvue.jsnuxt.jsvuexgetter