1

我已经尝试学习 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>
4

1 回答 1

1

你需要这样的东西

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>
于 2021-07-09T18:13:39.483 回答