Nuxt中如何正确配置Vuex Mutation实现点击按钮切换动态组件

问题解答 #

1. 直接触发mutation是否合法、如何正确配置mutation传值

• Vuex没有强制要求所有mutation必须通过action触发：只有涉及异步操作（接口请求、定时器等）的场景才需要用action封装，同步状态修改直接调用$store.commit触发mutation是完全符合规范的写法。
• 你当前的mutation配置有一处需要调整：正常Vuex配置中mutations是纯对象，不需要包裹为返回对象的函数（只有state要求为函数避免多实例状态污染），修正后的store/index.js代码如下：

// store/index.js
export const state = () => ({
  // 建议修改命名，避免和Vue内置的component关键字冲突
  currentComponent: "SignUpOne",
})

// 这里直接导出对象，不要用函数包裹
export const mutations = {
  changePage(state, payload) {
    state.currentComponent = payload.value;
  }
}

• 传递参数修改状态的写法你已经用对了，两种commit写法都支持：
  写法1（你当前用的对象风格传参）：

  this.$store.commit({
    type: 'changePage',
    value: "SignUpTwo"
  })
  

  写法2（简化的参数风格）：

  // mutation里直接取第二个参数即可：state.currentComponent = payload
  this.$store.commit('changePage', "SignUpTwo")
  

2. 当前组件切换方案的可行性和优化建议

• 你当前的思路可以正常运行，只需要修正上面提到的mutations导出方式、对应修改组件里的state映射字段即可：

<!-- SignUp.vue 调整映射字段 -->
<script>
import { mapState } from 'vuex'
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([
      'currentComponent',
    ])
  },
}
</script>

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

• 更优实现方案参考：
  • 简化触发代码：可以用mapMutations辅助函数简化commit调用，修改按钮组件如下：

  <!-- SeperateComponent.vue 简化写法 -->
  <script>
  import { mapMutations } from 'vuex'
  export default {
    methods: {
      ...mapMutations(['changePage']),
      changePg() {
        this.changePage({value: "SignUpTwo"})
      }
    },
  }
  </script>
  

  • 如果标签切换仅在父子组件之间使用，没有跨多层/无关组件共享状态的需求，不需要引入Vuex，直接用父组件传props+子组件触发emit事件的方案更轻量。
  • 可以给keep-alive加上include属性指定要缓存的组件名，避免缓存不必要的组件占用内存。

内容的提问来源于stack exchange，提问作者Guillermo Medel