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

问题描述

我尝试根据点击按钮的状态 (navBar.vue) 呈现组件。

我看到具有正确数据的操作和更改，但我无法让 getter 检索 pageVisible 的状态（应该是 perso-page 或 result-page）。 它是：

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

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

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

谢谢！

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

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

actions.js

export const pagedisplayed = (context,payload) => {
  context.commit('PAGE_disPLAYED',payload)
}

mutations.js

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

getters.js

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）