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

Question

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

---

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

我的尝试：注释掉解构赋值可以消除错误。

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

版本：vuex@3.1.2、vue@2.6.10、节点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; 
} 

Answer 2

你的解构与它应该的有点不同。 正确的方法是这样的：

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

既然你的 id 应该是未使用的别名，那么你不需要 id 周围的括号

尽我所能，我正在添加一个我在 devtools 上做的示例

const state = {
  id: 2308147,
  description: "hello world",
  beaconId: "1248ad890"
}

const { id: unused, ...rest} = state // unused: 2308147, rest: {description: 'hello world', beaconId: "1248ad890"}
state.items = rest
console.log(state) // { beaconId: "1248ad890", description: "hello world", id: 2308147, items: Object { description: "hello world", beaconId: "1248ad890" }