Зачем нам нужны мутации, сеттеры и геттеры для управления состоянием? - PullRequest
0 голосов
/ 28 февраля 2019

Я только сейчас изучаю управление состоянием в Vue.js и не могу понять, почему оно должно быть настолько сложным и запутанным со всеми этими различными методами (мутации, геттеры, сеттеры).Не проще ли изменить данные напрямую?Разве это не выглядит чище?

Что плохого в простом использовании такого кода, как этот?Что мне здесь не хватает?За исключением того, что я должен определить store: window.store в каждом компоненте.Безопасно ли для меня сделать это таким образом или критически необходимо для меня, чтобы использовать Vuex?

// global app data
window.store = {
    appName: 'Hello World!'
}

export default {
    template: `
        <div @click="changeAppName">Hellow {{ store.AppName }}</div>
    `,

    data()
    {
        return {
            store: window.store
        }
    }

    methods: {
        changeAppName() {
            store.appName = 'Reactive app name!'
        }
    }
};

Ответы [ 3 ]

0 голосов
/ 28 февраля 2019

Сначала цитата из Vuex doc :

Когда я должен это использовать?

Хотя Vuex помогает нам иметь дело с общим управлением состоянием, оно такжеидет со стоимостью большего количества понятий и шаблонов.Это компромисс между краткосрочной и долгосрочной производительностью.

Если вы никогда не создавали крупномасштабный SPA и не прыгнули прямо в Vuex, это может показаться многословным и пугающим.Это совершенно нормально - если ваше приложение простое, вам, скорее всего, будет хорошо без Vuex.Простой шаблон магазина может быть все, что вам нужно.Но если вы строите средне-крупномасштабный SPA, скорее всего, вы столкнулись с ситуациями, которые заставляют задуматься о том, как лучше обрабатывать состояние вне ваших компонентов Vue, и Vuex станет для вас естественным следующим шагом.Вот хорошая цитата Дана Абрамова, автора Redux:

«Библиотеки Flux похожи на очки: вы будете знать, когда они вам нужны».

Когда и если ваши компонентыстановятся очень большими, потому что они имеют много разных состояний и делают много разных мутаций состояний, становится все сложнее рассуждать об их коде и поддерживать или расширять их.Это происходит, когда становится интересным развязывание хранения состояния и модификации от самого компонента.

Рассмотрим также случай, когда несколько компонентов могут запускать одни и те же действия или мутации.В этом случае становится очевидным, что последний должен быть извлечен в общий объект / класс / файл, чтобы избежать дублирования логики.Как только вы дойдете до этой точки, вы уже очень приблизитесь к Vuex-подобной структуре.

Кроме того, приложение, которое взаимодействует с внутренним API, будет включать асинхронные вызовы ajax, обработку ошибок и т. Д. Если всеон находится в том же файле, что и компонент, он будет очень длинным и снова трудным для чтения и понимания.

Извлечение всех мутаций в отдельный модуль Vuex облегчает их тестирование в отдельности без необходимости создания экземплярафактические компоненты Vue, которые их используют.Компоненты Vue могут быть (в основном) исключительно для логики отображения и реагирования на события.

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

Наконец, Vuex добавляет замечательные функции, такие как отслеживание состояния и откат с плагином Vue.js devtools.Это позволяет проверять состояние в любой точке выполнения приложения и помогает понять все изменения, внесенные в него.Ниже приведен снимок экрана.

Короче говоря, чтобы ответить на ваш вопрос: нет, Vuex не является критически необходимым и его следует использовать, когда это имеет смысл, поскольку может принести больше необоснованного многословия.в некоторых случаях.

Vuex devtools

0 голосов
/ 28 февраля 2019

Если у вас есть опыт в объектно-ориентированном программировании, этот шаблон должен быть вам знаком.Таким образом, вы можете централизованно полагаться на свои данные.

  • Getter: например, чтобы проверить, инициализированы ли ваши данные
  • Мутации: например, проверить данные перед их записью в хранилище
  • Действия: производить асинхронные мутации

И, конечно, вы можете сделать это так, как вы упомянули, но это не чистый стиль и может не масштабироваться.

ИВот плагин под названием vuex pathify , который сделает все это намного проще, но трудно понять, если вы не знаете, как работает vuex.

0 голосов
/ 28 февраля 2019

Как только у вас появится более крупное приложение, которое будет взаимодействовать с другими компонентами, состояниями из хранилища и т. Д., Вы будете настолько рады, что приложили усилия для создания этих геттеров и сеттеров .

Если вы создаете небольшой, простой проект PWA или просто возитесь, то да, он может показаться запутанным и ненужным.Но как только этот небольшой проект стал более зависимым от компонентов, которые зависят от состояний Vuex (рассмотрите возможность использования Vuex, он вам не нужен, но вы будете знать, когда он вам нужен).

Как только вы создадите геттеры и сеттеры, и у вас будет этот шаблон во всем приложении, код будет чистым, легко читаемым для каждого программиста, который захочет помочь вам поддерживать проект.

Веселитесь с Vue.

...