变异 Nuxt 组件

问题描述

我已经尝试学习 vuex 好几个星期了（我看过几十个教程，他们只讨论了反例）。我很慢，仍然无法掌握如何做到这一点。
我的想法是能够在组件之间切换选项卡。我知道我应该使用一个动作来激活突变（我一直没能做到），但我认为在按下按钮时突变应该仍然有效？

我的问题是如何正确设置在单击按钮时传递组件值的突变？
另外，我想知道我的组件切换想法是否可行，或者是否有更好的方法来做到这一点。

SignUp.vue

<template>
  <keep-alive>
    <component :is="component" />
  </keep-alive>
</template>

<script>
import SignUpOne from "../components/SignUpOne.vue"
import SignUpTwo from "../components/SignUpTwo.vue"
import SignUpThree from "../components/SignUpThree.vue"

export default {
components: {
    SignUpOne,SignUpTwo,SignUpThree,},computed: {
    ...mapState([
      'component',])
  },}
</script>

store/index.js

export const state = () => ({
  component: "SignUpOne",})

export const mutations = () => ({
  changePage(state,payload) {
    state.component = payload.value;
  }
})

SeperateComponent.vue

<template>
  <button @click="changePg">Button</button>
</template>

<script>
export default {
  methods: {
    changePg() {
      this.$store.commit({
        type: 'changePage',value: "SignUpTwo"
       });
    },}
</script>

解决方法

你需要这样的东西

SignUp.vue

<script>
import { mapState } from 'vuex'
export default {
...

store/index.js

...

export const mutations = () => ({
  CHANGE_PAGE(state,newComponentName) {
    state.component = newComponentName;
  }
})

export const actions = () => ({
  updateComponentName({ commit },componentName) {
    commit('CHANGE_PAGE',componentName)
  },})

SeperateComponent.vue

<template>
    <div>
      <button @click="updateComponentName('SignUpOne')">Button</button>
      <button @click="updateComponentName('SignUpTwo')">Button</button>
      <button @click="updateComponentName('SignUpThree')">Button</button>
    </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['updateComponentName']),},}
</script>