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);
    }
}`

在上面，您復制現有狀態，修改該復制狀態的計數器，然后用新更新的狀態替換現有狀態。