Vuex从状态加载现有表单数据以进行编辑

在Vuex中加载现有表单数据以进行编辑的解决方法可以按照以下步骤进行操作：

1. 在Vuex store中定义一个状态（state）用于存储表单数据。假设我们要编辑一个用户表单，可以在store中定义一个名为user的状态。

// store.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: {}
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    }
  }
})

export default store

2. 在组件中使用computed属性将状态映射为组件的数据。

// UserForm.vue

<template>
  <form @submit="handleSubmit">
    <input v-model="user.name" type="text" placeholder="Name">
    <input v-model="user.email" type="email" placeholder="Email">
    <button type="submit">Save</button>
  </form>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['user'])
  },
  methods: {
    handleSubmit() {
      // 提交表单数据的逻辑
    }
  }
}
</script>

3. 在组件的created生命周期钩子中，将现有数据加载到状态中。

// UserForm.vue

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations(['setUser']),
    handleSubmit() {
      // 提交表单数据的逻辑
    }
  },
  created() {
    // 模拟从API加载现有数据
    const existingUserData = {
      name: 'John Doe',
      email: 'johndoe@example.com'
    }
    this.setUser(existingUserData)
  }
}
</script>

现在，当UserForm组件创建时，现有的用户数据将从Vuex store加载到表单中。这样，你就可以在表单中编辑现有数据，并在提交时保存更改的数据。