使用ant design vue 步骤条,点下一步后再点上一步,上一步数据没了,怎样才能点上一步,上一步数据依然在
时间: 2024-03-11 08:50:21 浏览: 10
要实现从下一步返回上一步时,上一步的数据依然存在,可以使用 Vuex 管理步骤条组件中的数据。具体实现步骤如下:
1. 在 Vuex 中定义一个对象,用于保存步骤条组件中的数据,例如:
```
state: {
stepData: {}
}
```
2. 在步骤条组件中,将需要保存的数据保存到 Vuex 中,例如:
```
this.$store.commit('setStepData', { step: 1, data: { name: 'John', age: 20 }})
```
3. 在 Vuex 中定义一个 mutation,用于更新步骤条组件中的数据,例如:
```
mutations: {
setStepData(state, payload) {
state.stepData[payload.step] = payload.data
}
}
```
4. 在步骤条组件中,使用 computed 计算属性获取当前步骤对应的数据,例如:
```
computed: {
currentStepData() {
return this.$store.state.stepData[this.currentStep]
}
}
```
5. 当从下一步返回上一步时,步骤条组件会重新渲染,此时再次获取上一步对应的数据即可,例如:
```
this.$refs['steps'].go(this.currentStep - 1)
this.previousStepData = this.$store.state.stepData[this.currentStep - 1]
```
通过以上步骤,可以实现从下一步返回上一步时,上一步的数据依然存在。