Question

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

规则冲突

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

根据规则进行更改后

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

有没有更好的方法来编写上述语句而不是破坏eslint规则？

解决方案 （感谢no-param-reassign的Cobaltway）

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

Answer 1

不，抱歉。

由于Vuex商店的状态被Vue反应，当我们改变时状态，观察状态的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数组中，这样您在修改状态属性时就不会遇到错误。

Answer 2

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

Vue.set使用相同的reactSetter函数（Reference）。

例如：

import Vue from 'vue';

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

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

注意：

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

Answer 3

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

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

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

Vuex Mutations和Airbnb eslint

3 个答案: