Как сохранить измененные данные на нескольких вкладках в магазине Vuex - PullRequest
0 голосов
/ 26 июня 2019

Я пытаюсь портировать приложение на основе состояния локального компонента для использования хранилища 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
        })
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...