Vue技术疑问：Vuex绑定场景下computed与data()该如何选择？

没问题，这就给你搞定多表单绑定Vuex的方案——核心就是靠props传的formname来动态定位Vuex里的数据路径，再结合计算属性实现合规的双向绑定，毕竟Vuex的状态可不能直接瞎改哦～

第一步：封装可复用的表单组件 #

我们先写一个通用的表单组件，通过接收formname props来指定对应Vuex的状态路径，用计算属性实现双向绑定：

<template>
  <div>
    Tracking formname: {{ formname }}
    <form method="post" autocomplete="off" @submit.prevent="handleSubmit">
      <!-- 用计算属性做双向绑定，替代直接绑定Vuex变量 -->
      <input type="text" name="objectvalue3" v-model="boundFormValue" />
      <input type="submit" class="btn btn-primary" value="提交表单" />
    </form>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import _ from 'lodash' // 用lodash简化深层对象的路径操作，也可以自己实现

export default {
  props: {
    formname: {
      type: String,
      required: true,
      // 简单验证路径格式，确保是合法的状态路径
      validator: (val) => /^[\w.]+$/.test(val)
    }
  },
  computed: {
    boundFormValue: {
      // 根据formname路径从Vuex state取值
      get() {
        return _.get(this.$store.state, this.formname)
      },
      // 通过mutation修改对应路径的状态，符合Vuex规范
      set(newValue) {
        this.updateVuexState({ path: this.formname, value: newValue })
      }
    }
  },
  methods: {
    ...mapMutations(['updateVuexState']),
    handleSubmit() {
      // 这里处理表单提交逻辑，比如调用Vuex action发送请求
      console.log(`表单${this.formname}提交值:`, this.boundFormValue)
      // 示例：触发action提交数据
      // this.$store.dispatch('submitForm', { formKey: this.formname, value: this.boundFormValue })
    }
  }
}
</script>

第二步：配置Vuex仓库 #

接下来在Vuex的store里，我们需要一个通用的mutation来处理动态路径的状态修改，同时定义示例状态：

import Vue from 'vue'
import Vuex from 'vuex'
import _ from 'lodash'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 示例：不同表单对应不同的状态路径
    userForm: {
      objectvalue3: ''
    },
    orderForm: {
      objectvalue3: ''
    },
    // 也支持顶层变量
    objectvalue3: ''
  },
  mutations: {
    updateVuexState(state, { path, value }) {
      // 用lodash的set方法修改任意路径的状态
      _.set(state, path, value)
    }
  },
  actions: {
    // 可选：封装表单提交的异步逻辑
    async submitForm({ commit }, { formKey, value }) {
      // 这里写实际的API请求逻辑
      // const response = await api.post('/submit-form', { [formKey]: value })
      console.log(`表单${formKey}提交成功`, value)
      // 请求成功后可做状态更新，比如清空表单
      // commit('updateVuexState', { path: formKey, value: '' })
    }
  }
})

第三步：在页面中使用多表单 #

现在你可以在同一页面多次使用这个组件，通过formname指定不同的Vuex路径：

<template>
  <div class="form-container">
    <!-- 绑定到userForm下的objectvalue3 -->
    <FormComponent formname="userForm.objectvalue3" />
    <!-- 绑定到orderForm下的objectvalue3 -->
    <FormComponent formname="orderForm.objectvalue3" />
    <!-- 绑定到顶层的objectvalue3 -->
    <FormComponent formname="objectvalue3" />
  </div>
</template>

<script>
import FormComponent from './components/FormComponent.vue'

export default {
  components: {
    FormComponent
  }
}
</script>

关键细节说明 #

• 如果不想引入lodash，可以自己实现简单的路径解析函数，比如把路径按.拆分成数组，然后遍历state来取值/赋值。
• 计算属性的get和set是实现双向绑定的核心，既保证了从Vuex取数的响应式，又通过mutation修改状态，符合Vuex的单向数据流规范。
• 表单的@submit.prevent用来阻止默认的表单提交行为，让我们可以自定义提交逻辑（比如调用Vuex action发送异步请求）。

内容的提问来源于stack exchange，提问作者JL Peyret