Я пытаюсь портировать приложение на основе состояния локального компонента для использования хранилища vuex. Это приложение содержит несколько вкладок с данными формы на каждой. Я хочу, чтобы в заголовке была кнопка «Сохранить все», которая берет любые локальные данные из измененных форм и сохраняет их в хранилище. Я хочу иметь возможность вызывать все действия, которые сохраняют данные каждой отдельной вкладки в рамках действия сохранить все, но действие сохранения каждой отдельной вкладки требует доступа к данным из вкладки.
Я бы хотел не менять хранилище при каждом входном событии из-за огромного количества форм и сложности данных. Я слышал о библиотеках, таких как vuex-map-fields . Однако из-за вышеупомянутых сложных данных, т.е. я чувствую, что использование таких библиотек будет скорее помехой, чем благом.
//Example code from store:
//Each tab will have its own writeData action, as well as its own success and error mutations. What I want is to consolidate these actions and mutations into their save all equivalents.
const actions = {
async writeData({ commit, state }, { tabData }) {
try {
const { data } = await $http.post(`api/call/write`,
{
tabData
}
);
commit('Success', { data })
} catch (error) {
commit('Error', { error })
}
}
},
const mutations = {
Success(state, { data }) {
state.data = data
},
Error(state, { error }) {
state.errors = [
...state.errors,
error
]
}
}
//Example code from tab:
methods: {
...mapActions("module", ["writedata"]),
saveABCData(batch_id) {
this.writedata({
tabData: this.locallyChangedData
})
},
computed: {
...mapState("module", {
data: state => state.specificTabData
})
}