javascript - 不能在 Vuex Mutation 中使用解构赋值

Question

编辑:我意识到 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
        }
    }
}

Answer 1

解决此问题的一种方法是使用 delete 运算符，但要确保您不会通过对其进行深度克隆来改变对象。

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