Vuex очень прост! - Vue.js

Vuex очень прост! - Vue.js

Обзор Vuex, библиотеки управления состоянием для Vue.js

Сегодняшняя статья призвана научить вас концепции и реализации Vuex. Прежде чем мы начнем, мы должны определить термин Vuex. Официальная документация Vuex определяет его как: Vuex - это шаблон управления состоянием + библиотека для приложений Vue.js. Это означает, что сначала мы должны ознакомиться с шаблоном управления состоянием и тем, как Vuex использует его.

Я расскажу:

• Flux (шаблон управления состоянием)
• Состояние
• Геттеры
• Мутации
• Действия

1. Флюс

Flux - это масштабируемый шаблон обработки данных (не библиотека), разработанный Facebook, и эта концепция быстро нашла применение во интерфейсных фреймворках. Итак, в чем проблема, которую решает Flux? Одной из хорошо известных проблем была ошибка уведомлений Facebook. Когда пользователь вошел в Facebook, он / она видит уведомление на значке сообщения. Однако, когда этот пользователь щелкнул по нему, сообщения не было, и уведомление исчезло. Через некоторое время он возвращался снова и снова с той же историей - пользователь щелкал значок сообщения, но нового сообщения не было.

Команда разработчиков Facebook несколько раз исправляла ошибку, которая некоторое время работала нормально, но в конце концов она снова появилась. Наконец, они решили решить проблему и исправить ошибку один раз и разработали шаблон управления данными Flux.

Flux имеет 4 основных компонента (действие, диспетчер, хранилище, просмотр) и 2 принципа (единый источник истины, данные только для чтения).

Я подробно расскажу в разделе Vuex, что каждый из них делает в отдельности. Объясняя принципы:

1. Единый источник истины

По сути, каждое приложение Vue должно иметь 2 типа данных: локальные и глобальные.

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

Глобальные данные: глобальные данные приложения должны быть доступны для всех компонентов и должны храниться в одном месте, отдельно от компонентов. Это единственное место - это магазин, и эта концепция называется SSOT (Единый источник истины).

2. Данные только для чтения

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

2. Vuex

Вернемся к Vuex. Как я уже упоминал выше, Flux - это не библиотека, это архитектура, а Vuex - это библиотека, реализующая этот шаблон и использующая его принципы. Чтобы использовать Vuex, мы можем либо подключить его к нашему приложению через ссылку CDN, либо как пакет npm.

Ссылка CDN:

//It requires ES6 Promises
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>

Пакет NPM:

//Run this commands to install
npm install vuex --save
//Use it like
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Vuex имеет 4 основных понятия, упомянутых в разделе «Flux»: Состояние, геттеры, мутации и действия.

Базовая настройка магазина:

const store = new Vuex.Store({
  state: {     
    myVariable: 0   
  },
  getters: {
   someFilter: state => {
    return state.myVariable[0]
   }
  },
  mutations: {
     addToArray(state, value) {
       state.myVariable.push(value)
     }
  },
  actions: {
     addToArray(context) {
      context.commit('addToArray');
     }
  }
});

Давайте подробнее рассмотрим!

3. Штат

Состояние идентично свойству данных экземпляра Vue, но данные свойства являются локальными, что означает, что они доступны только в пределах этой области. Состояние - это Единый Источник Истины нашего приложения. Мы определяем и храним там данные нашего приложения. Состояние Vuex также является реактивным, это означает, что всякий раз, когда мы обновляем какие-либо данные в нем, все компоненты, которые используют эти данные, соответствующим образом повторно отрисовываются.

state: {     
  myVariable: []   
}

4. Геттеры

Геттеры очень похожи на вычисляемые свойства в экземплярах Vue. Мы получаем данные о состоянии, выполняем некоторую фильтрацию, а затем возвращаемся в методах Getter.

getters: {
  someFilter: state => {
    return state.myVariable[0]
  }
}

5. Мутации

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

Мутации синхронны

mutations: {
   addToArray(state, value) {
     state.myVariable.push(value)
   }
}
//To commit
store.commit('addToArray', 'Hey! I am added!');

6. Действия

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

actions: {
   addToArray(context) {
    context.commit('addToArray');
   }
}
//Dispatching action
store.dispatch('addToArray')

Действия отправляются, Мутации совершаются.

Вопрос в том, почему у нас есть и действия, и мутации, когда мы делаем одно и то же? Есть 2 основных различия между Действиями и Мутациями.

1. Мутации синхронны, а действия - асинхронны.

That means we cannot request any data with axios or fetch API in mutations because mutations are synchronous. Instead we should request any data in actions along committing mutations.

2. Действия более сложны, но мутации - просты.

Actions handle application functionality and logic by committing more than a mutation, requesting data etc. while mutations are individual changes that aims to do one and certain thing.

На этом сегодняшняя статья. Я надеюсь, что это хорошее начало для знакомства с Vuex.

Подробнее: Хлопайте и делитесь :)

По любым вопросам: [email protected]