javascript - 无法在 Vuex Mutation 中使用解构赋值

编辑:我意识到 Vuex 可能允许在突变中直接改变状态，而不是在 Redux 突变中将状态视为不可变的。如果是这种情况，我的大部分研究都导致人们认为这样做是可以的，那么我可以避免我之前使用解构赋值的要求。

问题 :如果我在模块的突变中使用解构赋值，Vuex 在收集模块时似乎会抛出错误。

我试过的东西 :注释掉解构赋值消除了错误。

观察 :永远不会调用突变，或者至少永远不会记录放置的 console.log 消息。

版本 : vuex@3.1.2, vue@2.6.10, node v10.17.0

removeItem (state, id) {
    const { [id]: unused, ...rest } = state.items
    state.items = rest
}

vuex.common.js:272 Uncaught TypeError: Cannot read property 'getters' of undefined
    at vuex.common.js:272
    at Array.forEach (<anonymous>)
    at assertRawModule (vuex.common.js:271)
    at ModuleCollection.register (vuex.common.js:197)
    at vuex.common.js:211
    at vuex.common.js:80
    at Array.forEach (<anonymous>)
    at forEachValue (vuex.common.js:80)
    at ModuleCollection.register (vuex.common.js:210)
    at new ModuleCollection (vuex.common.js:171)

为了隔离我认为导致问题的原因，从语法上讲，这会导致 Vuex 出现错误:

removeItem (state, id) {
    const { [id]: unused, ...rest } = state.items
}

但这不会:

removeItem (state, id) {
    const { [id]: unused } = state.items
}

我发现我们正在使用 browserify 进行编译，结果如下:

removeReadyHelp: function removeReadyHelp(state, name) {
    var _state$items = state.items,
        unused = _state$items[name],
        rest = _objectWithoutProperties(_state$items, [name]);
}

...

function _objectWithoutProperties(obj, keys) {
    var target = {};
    for (var i in obj) {
        if (keys.indexOf(i) >= 0) continue;
        if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
        target[i] = obj[i];
    }
    return target;
}

以下代码是整个 vuex 模块。有问题的变异是 removeAvailableHelp (removeItem 上面的变异被编辑为通用的。)

import helpApi from '../../api/api-viewed-help.js'

/**
 * Info about available help necessary for triggering it from the help list.
 * @typedef {object} Help
 * @property {string} Help.name Uid name of help.
 * @property {HelpTrigger} Help.trigger
 */

/**
 * Function to call that should trigger the available help in the help list.
 * @callback HelpTrigger
 * @returns {void}
 */

export const module = {
    namespaced: true,
    state: {
        viewedHelpNames: [],
        availableHelp: {},
        hydrated: false
    },
    actions: {
        /**
         * Hydrate vuex state from database.
         * @param {*} vuex
         * @param {string} usercode Usercode to fetch viewed help by.s
         */
        async hydrate ({ commit }, usercode) {
            const viewedHelpNames = await helpApi.getAllViewedHelpNames(usercode)
            commit('_setViewedHelpNames', viewedHelpNames)
            commit('_hydrated')
        }
    },
    mutations: {
        /**
         * Set all viewed help names to passed array.
         * @param {*} state
         * @param {string[]} viewedHelpNames
         */
        _setViewedHelpNames (state, viewedHelpNames) {
            state.viewedHelpNames = viewedHelpNames
        },
        _hydrated (state) {
            state.hydrated = true
        },
        /**
         * @param {*} state Vuex
         * @param {Help} help
         */
        addAvailableHelp (state, help) {
            state.availableHelp[help.name] = help
        },
        removeAvailableHelp (state, name) {
            const { [name]: unused, ...res } = state.availableHelp
            state.availableHelp = res
        }
    }
}

最佳答案

克服这个问题的一种方法是使用 delete 运算符，但确保你不会通过深度克隆对象来改变对象。

removeAvailableHelp (state, name) {
  const res = {...state.availableHelp};
  delete res[name];
  state.availableHelp = res;
} 

关于javascript - 无法在 Vuex Mutation 中使用解构赋值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60211953/