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的回答）

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

Answer 1

不，对不起。

由于 Vuex 存储的状态是由 Vue 做出的反应，所以当我们改变状态时，观察状态的 Vue 组件会自动更新。 这也意味着 Vuex 突变在使用普通 Vue [...]

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

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

附录：

我可能有更好的解决方案。 请注意，这是他们的 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数组中，这样在修改状态属性时就不会遇到错误。

Answer 2

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

Vue.set 使用相同的 reactiveSetter 函数（ 参考）。

例如：

import Vue from 'vue';

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

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

笔记：

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

Answer 3

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

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

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