使用ant design vue 步骤条,点下一步后再点上一步,上一步数据没了,怎样才能点上一步,上一步数据依然在,步骤条及点上一步下一步函数完整代码

以下是一个使用 Ant Design Vue 步骤条实现保存上一步数据的示例代码，包括步骤条组件和点上一步下一步函数的完整代码：

步骤条组件代码：

<template>
  <a-steps :current="currentStep">
    <a-step title="Step 1"></a-step>
    <a-step title="Step 2"></a-step>
    <a-step title="Step 3"></a-step>
  </a-steps>
  <div v-show="currentStep === 0">
    <a-input v-model="name" placeholder="Enter your name"></a-input>
  </div>
  <div v-show="currentStep === 1">
    <a-input-number v-model="age" placeholder="Enter your age"></a-input-number>
  </div>
  <div v-show="currentStep === 2">
    <p>Name: {{previousStepData.name}}</p>
    <p>Age: {{previousStepData.age}}</p>
  </div>
  <div>
    <a-button :disabled="currentStep === 0" @click="previousStep">Previous</a-button>
    <a-button :disabled="currentStep === 2" @click="nextStep">Next</a-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0,
      name: '',
      age: '',
      previousStepData: {}
    }
  },
  computed: {
    // 获取当前步骤对应的数据
    currentStepData() {
      return {
        name: this.name,
        age: this.age
      }
    }
  },
  methods: {
    // 点击上一步按钮
    previousStep() {
      this.currentStep -= 1
      this.previousStepData = this.$store.state.stepData[this.currentStep]
    },
    // 点击下一步按钮
    nextStep() {
      this.currentStep += 1
      this.$store.commit('setStepData', { step: this.currentStep, data: this.currentStepData })
    }
  }
}
</script>

点上一步下一步函数的完整代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    stepData: {}
  },
  mutations: {
    setStepData(state, payload) {
      state.stepData[payload.step] = payload.data
    }
  }
})

export default {
  data() {
    return {
      currentStep: 0,
      name: '',
      age: '',
      previousStepData: {}
    }
  },
  computed: {
    // 获取当前步骤对应的数据
    currentStepData() {
      return {
        name: this.name,
        age: this.age
      }
    }
  },
  methods: {
    // 点击上一步按钮
    previousStep() {
      this.currentStep -= 1
      this.previousStepData = this.$store.state.stepData[this.currentStep]
    },
    // 点击下一步按钮
    nextStep() {
      this.currentStep += 1
      this.$store.commit('setStepData', { step: this.currentStep, data: this.currentStepData })
    }
  },
  store
}

请注意，上述代码中使用了 Vuex 来管理步骤条组件中的数据，需要在组件外部定义一个 Vuex store，并在组件中引入。如果您已经在项目中使用了 Vuex，可以直接在现有的 store 中添加相应的 state 和 mutations。