Vuex 突变和 Airbnb eslint

Question

我在我的 Vuejs 项目中取消 Airbnb Eslint（使用 Vue-cli）。其中一条规则是no-param-reassign。为了控制状态（使用 Vuex），必须使用突变/动作：

规则冲突

mutations: {
    increase: (state) => {
        state.counter++;
    }
}

按规则修改后

mutations: {
    increase: (state) => {
        const thisState = state;
        thisState.coutner++;
    }
}

有没有更好的方法来写上面的语句并且不违反 eslint 规则？

解决方案 （感谢Cobaltway的answer）

将'state' 添加到规则中的ignorePropertyModificationsFor。

Answer 1

如果您不想更改 Airbnb 配置的规则，您可以执行以下操作：`

mutations: {
    increase: (state) => {
        const thisState = {...state};
        thisState.counter++;
        Object.assign(state, thisState);
    }
}`

在上面，您复制现有状态，修改该复制状态的计数器，然后用新更新的状态替换现有状态。

Answer 2

替代方案：您可以使用Vue.set。

Vue.set 使用相同的 reactiveSetter 函数 (Reference)。

例如：

import Vue from 'vue';

const state = () => ({ counter: 0 });

const mutations = {
  increase(states) {
    Vue.set(states, 'counter', states.counter + 1);
  },
};

注意：

• 我故意在函数increase上使用变量名states而不是state，因为变量state可能是在上层范围内定义（如我上面的示例）。如果不将第一个突变的参数重命名为“states”（或其他名称），则会违反规则no-shadow。

Answer 3

不，抱歉。

由于 Vuex 商店的状态是由 Vue 做出的反应，当我们改变 state，Vue 组件观察状态会自动更新。 这也意味着 Vuex 突变受到相同的反应性 使用普通 Vue 时的注意事项 [...]

来源：https://vuex.vuejs.org/en/mutations.html

这确实意味着您必须改变参数以使任何更改变为您的实际状态。唯一的解决方案是关闭该规则。

附录：

我可能有更好的解决方案。请注意，这是their ESLint 强制执行的实际规则：

'no-param-reassign': ['error', {
  props: true,
  ignorePropertyModificationsFor: [
    'acc', // for reduce accumulators
    'e', // for e.returnvalue
    'ctx', // for Koa routing
    'req', // for Express requests
    'request', // for Express requests
    'res', // for Express responses
    'response', // for Express responses
    '$scope', // for Angular 1 scopes
  ]
}],

您可以将'state' 添加到ignorePropertyModificationsFor 数组中，这样您在修改状态属性时就不会遇到错误。