Question

我正在发送一个 axios.post，其中包含我的 Vuex 商店的整个 state，其中包括来自其他模块的几个 state。在其中一个模块中，有一个数组正在像正常情况一样发生变异，state.array 将通过调度该模块的 actions/mutations 进行变异。之后，我发送了 axios 请求，但它发送了 state，就好像它不会被更改一样。

代码如下：

父模块：

export default {
    namespaced: true,
    modules: {
        // ... Modules
        person: person, // Includes all the state from person module
    },
    state: {
        // State
    },
    getters: {
        // ... Getters
    },
    actions: {
        // ... Actions
        update({commit, dispatch, state, rootState}) {
            axios.post(url, state) // Should send local state plus person's state
        },
    },
    mutations: {
        // ... Mutations
    },
}

人物模块

export default {
    namespaced: true,
    modules: {
        // ... Modules
    },
    state: {
        // ... State
        array: [1,2,3,4,5],
    },
    getters: {
        // ... Getters
    },
    actions: {
        // ... Actions
        addToArray({commit}, value){
            commit('addToArray', value)
        },
        deleteFromArray({commit}, value) {
            commit('deleteFromArray', value)
        },
    },
    mutations: {
        // ... Mutations
        addToArray(state, payload){
            state.array.push(payload)
        },
        deleteFromArray(state, payload) {
            // Initial state.array: [1,2,3,4,5], lenght: 5
            let arr = []
            for (let ar of state.array) {
                // Payload = 5
                if (ar !== payload) {
                    arr.push(ar)
                }
            }
            // New arr = [1,2,3,4]
            state.array = arr
            console.log(state.array)
            // Output: state.array: [1,2,3,4], length: 4
        },
    },
}

所以最初这个数组的长度为 5，deleteFromArray 将数组的长度递减到 4（直到这里一切正常），然后我更新从“父”模块发送 axios 请求长度为 4 的数组的新变异值，而是以其长度为 5 的初始值发送。

另一方面，addToArray 运行良好，它也按预期发送长度为 6 的新数组值。

我真的看不到这里发生了什么。我还尝试了另一种使用 splice() 从数组中删除的方法，它在本地状态下工作，但似乎没有从“父”模块中捕获突变，再次，仅在数组减法时.

从父模块访问 Vuex 模块的变异状态

0 个答案: