如果您需要在组件 A 中提交数据时同时获取组件 B 和组件 C 中的数据,可以在 Vuex 中维护一个对象,其中每个属性对应一个组件的数据。这样,当组件 B 或组件 C 提交数据时,可以将数据存储到该对象中,然后在组件 A 中提交数据时一并获取该对象中的所有数据。下面是一种可能的实现方式:
首先,定义一个 data 对象来存储每个组件的数据:
const data = {
ComponentA: {
name: '',
age: '',
},
ComponentB: {
school: '',
class: '',
},
ComponentC: {
city: '',
street: '',
},
};
然后,在 Vuex 中定义 setData 和 getData 两个 mutation:
const store = new Vuex.Store({
state: {
data,
},
mutations: {
setData(state, payload) {
state.data[payload.componentName] = payload.data;
},
getData(state) {
const result = {};
for (const key in state.data) {
result[key] = { ...state.data[key] };
}
return result;
},
},
});
在组件 B 和组件 C 中,修改提交事件的处理函数,将数据存储到 data 对象中:
this.$store.commit('setData', {
componentName: 'ComponentB',
data: this.form,
});
在组件 A 中,修改提交事件的处理函数,获取 data 对象中的所有数据并提交到后端:
const data = this.$store.commit('getData');
console.log('Submit All Data:', data);