You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/ru/guide/actions.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -61,7 +61,7 @@ actions: {
61
61
62
62
Действия поддерживают тот же формат для передачи нагрузки, а также объектный синтаксис:
63
63
64
-
```js
64
+
```js
65
65
// вызов с нагрузкой
66
66
store.dispatch('incrementAsync', {
67
67
amount:10
@@ -76,7 +76,7 @@ store.dispatch({
76
76
77
77
Более приближённым к реальности примером действий будет формирование заказа на основе состояния корзины покупок. Логика такого действия включает в себя **вызов асинхронного API** и **инициализацию нескольких мутаций**:
78
78
79
-
```js
79
+
```js
80
80
actions: {
81
81
checkout ({ commit, state }, products) {
82
82
// сохраним находящиеся на данный момент в корзине товары
@@ -102,7 +102,7 @@ actions: {
102
102
103
103
Диспетчеризировать действия в компонентах можно при помощи `this.$store.dispatch('xxx')` или используя вспомогательную функцию `mapActions`, создающую локальные псевдонимы для действий в виде методов компонента (требуется наличие корневого `$store`):
104
104
105
-
```js
105
+
```js
106
106
import { mapActions } from'vuex'
107
107
108
108
exportdefault {
@@ -127,7 +127,7 @@ export default {
127
127
128
128
Первое, что нужно знать — `store.dispatch` может обрабатывать Promise, возвращаемый обработчиком действия, и также возвращает Promise:
Copy file name to clipboardexpand all lines: docs/ru/guide/forms.md
+6-6
Original file line number
Diff line number
Diff line change
@@ -4,19 +4,19 @@
4
4
5
5
При использовании строгого режима Vuex может показаться неочевидным как использовать `v-model` с частью состояния Vuex:
6
6
7
-
```html
7
+
```html
8
8
<inputv-model="obj.message">
9
9
```
10
10
11
11
Предположим, что `obj` — вычисляемое свойство, которое просто возвращает ссылку на объект из хранилища. В таком случае, `v-model` будет пытаться напрямую изменять значение `obj.message` при действиях пользователя. В строгом режиме такие изменения спровоцируют ошибку, поскольку они происходят вне обработчиков мутаций Vuex.
12
12
13
13
Для работы с Vuex в такой ситуации, следует привязать значение к `<input>` и отслеживать его изменения по событию `input` или `change`:
14
14
15
-
```html
15
+
```html
16
16
<input:value="message"@input="updateMessage">
17
17
```
18
18
19
-
```js
19
+
```js
20
20
// ...
21
21
computed: {
22
22
...mapState({
@@ -32,7 +32,7 @@ methods: {
32
32
33
33
А вот и обработчик мутаций:
34
34
35
-
```js
35
+
```js
36
36
// ...
37
37
mutations: {
38
38
updateMessage (state, message) {
@@ -45,11 +45,11 @@ mutations: {
45
45
46
46
Заметно, что получившаяся выше запись — куда многословнее, чем используемая в связке `v-model` с локальным состоянием, да и некоторые полезные возможности `v-model` таким образом упускаются. В качестве альтернативы можно предложить использование двунаправленного вычисляемого свойства с сеттером:
Copy file name to clipboardexpand all lines: docs/ru/guide/getters.md
+10-10
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
5
5
Иногда может потребоваться вычислять производное состояние на основе состояния хранилища, например, отфильтровать список и затем подсчитать количество элементов:
Теперь можно легко использовать его внутри любого компонента:
65
65
66
-
```js
66
+
```js
67
67
computed: {
68
68
doneTodosCount () {
69
69
returnthis.$store.getters.doneTodosCount
@@ -77,7 +77,7 @@ computed: {
77
77
78
78
Если возвращать функцию, то появляется возможность также передавать аргументы геттерам. Например, это может пригодиться, когда необходимо возвращать данные по указанному критерию:
Copy file name to clipboardexpand all lines: docs/ru/index.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Что такое Vuex?
2
2
3
-
:::tip Pinia - новый стандарт по-умолчанию
3
+
:::tip Pinia - новый стандарт по-умолчанию
4
4
5
5
Официальная библиотека управления состоянием для Vue была изменена на [Pinia](https://pinia.vuejs.org). Pinia имеет почти такой же или улучшенный API что и Vuex 5, описанный в [Vuex 5 RFC](https://github.com/vuejs/rfcs/pull/271). Можно рассматривать Pinia как Vuex 5 с новым именем. Pinia также можно использовать вместе с Vue 2.x.
0 commit comments