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/getting-started.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -35,7 +35,7 @@ store.commit('increment')
35
35
console.log(store.state.count) // -> 1
36
36
```
37
37
38
-
Ещё раз заметим: мы вызываем мутацию вместо того чтобы напрямую изменить `store.state.count` потому что мы хотим явным образом отслеживать изменения. Это простое архитектурное соглашение делает наши намерения более очевидными и упрощает понимание для читателя кода того, как измененяется состояние приложения. Кроме того, этот подход позволяет реализовать инструменты для логирования каждой мутации, создания моментальных слепков состояния приложения и даже применения "машины времени" при отладке.
38
+
Ещё раз заметим: мы вызываем мутацию, вместо того чтобы напрямую изменить `store.state.count`, потому что мы хотим явным образом отслеживать изменения. Это простое архитектурное соглашение делает намерения более очевидными и упрощает понимание изменений состояния приложения при чтении кода. Кроме того, этот подход позволяет реализовать инструменты для логирования каждой мутации, создания моментальных слепков состояния приложения и даже применения "машины времени" при отладке.
39
39
40
40
Поскольку хранилище реактивно, для использования его состояния в компонентах достаточно просто создать вычисляемые свойства. Изменения состояния можно вызывать, инициализируя мутации в методах компонентов.
Обратите внимание, что действия, мутации и геттеры, определённые внутри модулей, тем не менее регистрируются в **глобальном пространстве имён** — это позволяет нескольким модулям реагировать на один и тот же тип мутации или действия. Избежать конфликта пространства имён вы можете, указывая для них префикс или суффикс. При создании пригодных для повторного использования модулей Vuex, пожалуй, так поступать даже нужно — кто знает, в каком окружении их будут использовать? Например, предположим что мы создаём модуль `todos`:
84
+
По умолчанию действия, мутации и геттеры внутри модулей регистрируются в **глобальном пространстве имён** — это позволяет нескольким модулям реагировать на тот же тип мутаций/действий.
85
+
86
+
Если вы хотите сделать модули более самодостаточными и готовыми для переиспользования, вы можете создать его с собственным пространством имён, указав опцию `namespaced: true`. Когда модуль будет зарегистрирован, все его геттеры, действия и мутации будут автоматически связаны с этим пространством имён, основываясь на пути по которому зарегистрирован модуль. Например:
85
87
86
88
```js
87
-
// types.js
89
+
conststore=newVuex.Store({
90
+
modules: {
91
+
account: {
92
+
namespaced:true,
93
+
94
+
// содержимое модуля
95
+
state: { ... }, // состояние модуля автоматически вложено и не зависит от опции пространства имён
// большая вложенность с собственным пространством имён
117
+
posts: {
118
+
namespaced:true,
119
+
120
+
state: { ... },
121
+
getters: {
122
+
popular () { ... } // -> getters['account/posts/popular']
123
+
}
124
+
}
125
+
}
126
+
}
127
+
}
128
+
})
129
+
```
130
+
131
+
Геттеры и действия с собственным пространством имён будут получать свои локальные `getters`, `dispatch` и `commit`. Другими словами, вы можете использовать содержимое модуля без написания префиксов в том же модуле. Переключения между пространствами имён не влияет на код внутри модуля.
88
132
89
-
// определим названия геттеров, действий и мутаций как константы
90
-
// используя название модуля (`todos`) в качестве префикса
91
-
exportconstDONE_COUNT='todos/DONE_COUNT'
92
-
exportconstFETCH_ALL='todos/FETCH_ALL'
93
-
exportconstTOGGLE_DONE='todos/TOGGLE_DONE'
133
+
#### Доступ к глобальному содержимому в модулях с своим пространством имён
134
+
135
+
Если вы хотите использовать глобальное состояние и геттеры, `rootState` и `rootGetters` передаются 3-м и 4-м аргументами в функции геттеров, а также как свойства в объекте `context`, передаваемом в функции действий.
136
+
137
+
Для запуска действий или совершении мутаций в глобальном пространстве имён нужно добавить `{ root: true }` 3-м аргументом в `dispatch` и `commit`.
138
+
139
+
```js
140
+
modules: {
141
+
foo: {
142
+
namespaced:true,
143
+
144
+
getters: {
145
+
// `getters` ограничены геттерами данного модуля
146
+
// вы можете использовать rootGetters из 4-го аргумента геттеров
#### Подключение с помощью вспомогательных функций к пространству имён
174
+
175
+
Подключение модуля со своим пространством имён к компонентам с помощью вспомогательных функций `mapState`, `mapGetters`, `mapActions` и `mapMutations` это может выглядеть подобным образом:
176
+
96
177
```js
97
-
// modules/todos.js
98
-
import*astypesfrom'../types'
178
+
computed: {
179
+
...mapState({
180
+
a:state=>state.some.nested.module.a,
181
+
b:state=>state.some.nested.module.b
182
+
})
183
+
},
184
+
methods: {
185
+
...mapActions([
186
+
'some/nested/module/foo',
187
+
'some/nested/module/bar'
188
+
])
189
+
}
190
+
```
99
191
100
-
// теперь используем определённые выше константы
101
-
consttodosModule= {
102
-
state: { todos: [] },
192
+
В таких случаях вы можете передать строку с пространством имён в качестве первого аргумента к вспомогательным функциям, тогда все привязки будут выполнены в контексте этого модуля. Пример выше можно упростить до:
103
193
104
-
getters: {
105
-
[types.DONE_COUNT] (state) {
106
-
// ...
107
-
}
108
-
},
194
+
```js
195
+
computed: {
196
+
...mapState('some/nested/module', {
197
+
a:state=>state.a,
198
+
b:state=>state.b
199
+
})
200
+
},
201
+
methods: {
202
+
...mapActions('some/nested/module', [
203
+
'foo',
204
+
'bar'
205
+
])
206
+
}
207
+
```
109
208
110
-
actions: {
111
-
[types.FETCH_ALL] (context, payload) {
112
-
// ...
113
-
}
114
-
},
209
+
#### Уточнение для разработчиков плагинов
115
210
116
-
mutations: {
117
-
[types.TOGGLE_DONE] (state, payload) {
118
-
// ...
119
-
}
211
+
Вас может обеспокоить непредсказуемость пространства имён для ваших модулей, когда вы создаёте [плагин](plugins.md) с собственными модулями и возможностью пользователям добавлять их в хранилище Vuex. Ваши модули будут также помещены в пространство имён, если пользователи плагина добавляют ваши модули в модуль со своим пространством имён. Чтобы приспособиться к этой ситуации, вам может потребоваться получить значение пространства имён через настройки плагина:
212
+
213
+
```js
214
+
// получение значения пространства имён через options
0 commit comments