如何跨vuex存储中的多个选项卡保存更改的数据

Question

我正在尝试移植基于本地组件状态的应用程序以使用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
        })
    }