|
@@ -1,8 +1,8 @@
|
|
# Действия
|
|
# Действия
|
|
|
|
|
|
-Действия — похожи на мутации, с несколькими отличиями:
|
|
|
|
|
|
+Действия — похожи на мутации с несколькими отличиями:
|
|
|
|
|
|
-- Вместо того чтобы напрямую менять состояние, действия инициируют мутации.
|
|
|
|
|
|
+- Вместо того, чтобы напрямую менять состояние, действия инициируют мутации;
|
|
- Действия могут использоваться для асинхронных операций.
|
|
- Действия могут использоваться для асинхронных операций.
|
|
|
|
|
|
Зарегистрируем простое действие:
|
|
Зарегистрируем простое действие:
|
|
@@ -25,7 +25,7 @@ const store = new Vuex.Store({
|
|
})
|
|
})
|
|
```
|
|
```
|
|
|
|
|
|
-Обработчики действий получают объект контекста, содержащий те же методы и свойства, что и сам инстанс хранилища, так что вы можете вызвать `context.commit` для инициирования мутации, или обратиться к состоянию и геттерам через `context.state` и `context.getters`. Позднее, при рассмотрении [Модулей](modules.md), мы увидим, однако, что этот контекст — не то же самое, что и сам инстанс хранилища.
|
|
|
|
|
|
+Обработчики действий получают объект контекста, содержащий те же методы и свойства, что и сам инстанс хранилища, так что вы можете вызвать `context.commit` для инициирования мутации или обратиться к состоянию и геттерам через `context.state` и `context.getters`. Позднее при рассмотрении [Модулей](modules.md) мы увидим, однако, что этот контекст — не то же самое, что инстанс хранилища.
|
|
|
|
|
|
На практике для упрощения кода часто используется [деструктуризация аргументов](https://github.com/lukehoban/es6features#destructuring) из ES2015 (особенно при необходимости многократного вызова `commit`):
|
|
На практике для упрощения кода часто используется [деструктуризация аргументов](https://github.com/lukehoban/es6features#destructuring) из ES2015 (особенно при необходимости многократного вызова `commit`):
|
|
|
|
|
|
@@ -57,7 +57,7 @@ actions: {
|
|
}
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
-Диспетчеризация действий поддерживает такой же объектный синтаксис, как диспетчеризация мутаций:
|
|
|
|
|
|
+Диспетчеризация действий поддерживает тот же объектный синтаксис, что и диспетчеризация мутаций:
|
|
|
|
|
|
``` js
|
|
``` js
|
|
// параметризированный вызов
|
|
// параметризированный вызов
|
|
@@ -120,7 +120,7 @@ export default {
|
|
|
|
|
|
Раз действия зачастую асинхронны, то как узнать, что действие уже завершилось? И, что важнее, как быть со связанными между собой действиями при организации более сложных асинхронных потоков?
|
|
Раз действия зачастую асинхронны, то как узнать, что действие уже завершилось? И, что важнее, как быть со связанными между собой действиями при организации более сложных асинхронных потоков?
|
|
|
|
|
|
-Для начала стоит вспомнить, что `store.dispatch` возвращает значение, равное результату вызванного обработчика действия, что позволяет использовать Promise:
|
|
|
|
|
|
+Для начала стоит вспомнить, что `store.dispatch` возвращает значение, равное результату вызванного обработчика действия, что позволяет использовать Promise:
|
|
|
|
|
|
``` js
|
|
``` js
|
|
actions: {
|
|
actions: {
|
|
@@ -156,7 +156,7 @@ actions: {
|
|
}
|
|
}
|
|
```
|
|
```
|
|
|
|
|
|
-И, в конце концов, используя [async / await](https://tc39.github.io/ecmascript-asyncawait/) — возможности, которые вот-вот станут общедоступными, можно компоновать действия таким образом:
|
|
|
|
|
|
+И, в конце концов, используя [async / await](https://tc39.github.io/ecmascript-asyncawait/) — возможности, которые вот-вот станут общедоступны - можно компоновать действия таким образом:
|
|
|
|
|
|
``` js
|
|
``` js
|
|
// предположим, что getData() и getOtherData() возвращают промисы
|
|
// предположим, что getData() и getOtherData() возвращают промисы
|