Мутации Vuex и Airbnb eslint


Мутации Vuex и Airbnb eslint

20.06.2017 06:25:08 Просмотров 39 Источник

Я unsing на Airbnb Eslint на мой Vuejs проекта (через вю-интерфейс командной строки). И одно из правил-не-парам-переназначение. Для того чтобы контролировать состояние (используя Vuex), необходимо использовать мутации/ действия:

Коллизионные нормы

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

После изменений в соответствии с правилами

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

Есть ли лучший способ написать заявление выше и не нарушать правила eslint?

Решение (благодаря ответу Cobaltway)

Добавьте 'state' к ignorePropertyModificationsFor к правилам.

У вопроса есть решение - Посмотреть?

Ответы - Мутации Vuex и Airbnb eslint / Vuex Mutations and Airbnb eslint

Является ответом!
Cobaltway

20.06.2017 07:42:02

- Нет, извини.

Поскольку Vuex магазина государства реактивного Вью, когда мы мутировать государство, компоненты Вью наблюдать состояние будет обновляться автоматически. Это также означает, что мутации 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, чтобы не столкнуться с ошибкой при изменении свойств состояния.

andreyunugro

04.09.2020 08:13:18

Альтернатива: вы можете использовать Vue. set.

Vue. set использует ту же функцию reactiveSetter (ссылка).

Например:

import Vue from 'vue';

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

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

Примечание:

  • Я специально использую состояния имени переменной, а не состояние при увеличении функции, потому что состояние переменной может быть определено в верхней области видимости (как в моем примере выше). Если не переименовать аргумент первых мутаций в "состояния" (или другое имя), то это нарушает правило no-shadow.
Carlton

07.09.2020 08:22:20

Если вы не хотите изменять правила конфигурации Airbnb, вы можете сделать следующее:`

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

В приведенном выше примере Вы делаете копию существующего состояния, изменяете счетчик в этом скопированном состоянии, а затем заменяете существующее состояние новым обновленным состоянием.

Помочь в развитии проекта:
Закрыть X