docs(ru): translation update (#1858)

Co-authored-by: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com>

docs/ru/README.md

@@ -4,7 +4,7 @@
 
 Vuex — **паттерн управления состоянием + библиотека** для приложений на Vue.js. Он служит централизованным хранилищем данных для всех компонентов приложения с правилами, гарантирующими, что состояние может быть изменено только предсказуемым образом. Vuex интегрируется с официальным расширением [vue-devtools](https://github.com/vuejs/vue-devtools), предоставляя «из коробки» такие продвинутые возможности, как «машину времени» для отладки и экспорт/импорт слепков состояния данных.
 
-### Что такое «паттерн управления состоянием»?
+## Что такое «паттерн управления состоянием»?
 
 Давайте начнём с простого приложения Vue, реализующего счётчик:
 
@@ -58,7 +58,7 @@ new Vue({
 
 ![vuex](/ru/vuex.png)
 
-### Когда следует использовать Vuex?
+## Когда следует использовать Vuex?
 
 Vuex помогает управлять совместно используемым состоянием ценой привнесения новых концепций и вспомогательного кода. Компромисс, когда кратковременная продуктивность страдает на благо долгосрочной.
 

docs/ru/api/README.md

@@ -176,13 +176,16 @@ const store = new Vuex.Store({ ...options });
 
 * `subscribe(handler: Function, options?: Object): Function`
 
-Отслеживание вызова мутаций хранилища. Обработчик `handler` вызывается после каждой мутации и получает в качестве параметров дескриптор мутации и состояние после мутации:
+Отслеживание вызова мутаций хранилища. Обработчик `handler` вызывается после каждой мутации и получает в качестве параметров дескриптор мутации и состояние после мутации.
 
 ```js
-store.subscribe((mutation, state) => {
+const unsubscribe = store.subscribe((mutation, state) => {
-  console.log(mutation.type);
+  console.log(mutation.type)
-  console.log(mutation.payload);
+  console.log(mutation.payload)
-});
+})
+
+// для остановки отслеживания нужно вызвать unsubscribe
+unsubscribe()
 ```
 
 По умолчанию, новый обработчик добавляется в конец цепочки, поэтому он будет выполняться после других обработчиков, добавленных раньше. Это поведение можно переопределить добавив `prepend: true` в `options`, что позволит добавлять обработчик в начало цепочки.
@@ -191,7 +194,7 @@ store.subscribe((mutation, state) => {
 store.subscribe(handler, { prepend: true })
 ```
 
-Для прекращения отслеживания, необходимо вызвать возвращаемую методом функцию.
+Метод `subscribe` возвращает функцию `unsubscribe`, которую требуется вызывать когда отслеживание больше не требуется. Например, можно подписаться на модуль Vuex и прекращать отслеживание при удалении регистрации модуля. Или можно вызвать `subscribe` внутри компонента Vue, а позднее уничтожить компонент. В таких случаях, необходимо вручную останавливать отслеживание.
 
 Чаще всего используется в плагинах. [Подробнее](../guide/plugins.md)
 
@@ -201,13 +204,18 @@ store.subscribe(handler, { prepend: true })
 
 > Добавлено в версии 2.5.0
 
-Отслеживание вызова действий хранилища. Обработчик `handler` вызывается после каждого действия и получает в качестве параметров дескриптор действия и текущее состояние хранилища:
+Отслеживание вызова действий хранилища. Обработчик `handler` вызывается после каждого действия и получает в качестве параметров дескриптор действия и текущее состояние хранилища.
+
+Метод `subscribe` возвращает функцию `unsubscribe`, которую требуется вызывать когда отслеживание больше не требуется. Например, при удалении регистрации модуля Vuex или перед уничтожением компонента Vue.
 
 ```js
-store.subscribeAction((action, state) => {
+const unsubscribe = store.subscribeAction((action, state) => {
-  console.log(action.type);
+  console.log(action.type)
-  console.log(action.payload);
+  console.log(action.payload)
-});
+})
+
+// для остановки отслеживания нужно вызвать unsubscribe
+unsubscribe()
 ```
 
 По умолчанию, новый обработчик добавляется в конец цепочки, поэтому он будет выполняться после других обработчиков, добавленных раньше. Это поведение можно переопределить добавив `prepend: true` в `options`, что позволит добавлять обработчик в начало цепочки.
@@ -216,7 +224,7 @@ store.subscribeAction((action, state) => {
 store.subscribeAction(handler, { prepend: true })
 ```
 
-Для прекращения отслеживания, необходимо вызвать возвращаемую методом функцию.
+Метод `subscribe` возвращает функцию `unsubscribe`, которую требуется вызывать когда отслеживание больше не требуется. Например, можно подписаться на модуль Vuex и прекращать отслеживание при удалении регистрации модуля. Или можно вызвать `subscribe` внутри компонента Vue, а позднее уничтожить компонент. В таких случаях, необходимо вручную останавливать отслеживание.
 
 > Добавлено в версии 3.1.0
 
@@ -237,7 +245,7 @@ store.subscribeAction({
 
 С версии 3.4.0 в `subscribeAction` также можно указывать обработчик `error` для перехвата ошибки, выброшенной при выполнении действия. В качестве третьего аргумента функция получает объект `error`.
 
-``` js
+```js
 store.subscribeAction({
   error: (action, state, error) => {
     console.log(`error action ${action.type}`)

docs/ru/guide/README.md

@@ -8,7 +8,7 @@
 
 2. Нельзя напрямую изменять состояние хранилища. Единственный способ внести изменения — явно **вызвать мутацию**. Это гарантирует, что любое изменение состояния оставляет след и позволяет использовать инструментарий, чтобы лучше понимать ход работы приложения.
 
-### Простейшее хранилище
+## Простейшее хранилище
 
 :::tip ЗАМЕЧАНИЕ
 В примерах кода документации используется синтаксис ES2015. Если вы с ним ещё не знакомы, [сейчас самое время изучить](https://babeljs.io/docs/learn-es2015/)!
@@ -16,6 +16,8 @@
 
 После [установки](../installation.md) Vuex, давайте создадим хранилище. Это довольно просто — необходимо указать начальный объект состояния и некоторые мутации:
 
+### Vuex 3.x (для Vue 2)
+
 ```js
 import Vue from 'vue'
 import Vuex from 'vuex'
@@ -34,6 +36,23 @@ const store = new Vuex.Store({
 })
 ```
 
+### Vuex 4.x (для Vue 3)
+
+```js
+import { createStore } from 'vuex'
+import { createApp } from 'vue'
+
+const store = createStore({
+  state () {
+    return {
+      count: 1
+    }
+  }
+})
+const app = createApp({ /* ваш корневой компонент */ })
+app.use(store)
+```
+
 Теперь можно получить доступ к объекту состояния через `store.state` и вызвать изменение состояния с помощью метода `store.commit`:
 
 ```js

docs/ru/guide/actions.md

@@ -39,7 +39,7 @@ actions: {
 }
 ```
 
-### Диспетчеризация действий
+## Диспетчеризация действий
 
 Действия запускаются методом `store.dispatch`:
 
@@ -98,7 +98,7 @@ actions: {
 
 Таким образом удаётся организовать поток асинхронных операций, записывая побочные эффекты действий в виде мутаций состояния.
 
-### Диспетчеризация действий в компонентах
+## Диспетчеризация действий в компонентах
 
 Диспетчеризировать действия в компонентах можно при помощи `this.$store.dispatch('xxx')` или используя вспомогательную функцию `mapActions`, создающую локальные псевдонимы для действий в виде методов компонента (требуется наличие корневого `$store`):
 
@@ -121,7 +121,7 @@ export default {
 };
 ```
 
-### Композиция действий
+## Композиция действий
 
 Раз действия зачастую асинхронны, то как узнать, что действие уже завершилось? И, что важнее, как быть со связанными между собой действиями при организации более сложных асинхронных потоков?
 

docs/ru/guide/forms.md

@@ -41,7 +41,7 @@ mutations: {
 }
 ```
 
-### Двунаправленные вычисляемые свойства
+## Двунаправленные вычисляемые свойства
 
 Заметно, что получившаяся выше запись — куда многословнее, чем используемая в связке `v-model` с локальным состоянием, да и некоторые полезные возможности `v-model` мы таким образом упускаем. В качестве альтернативы можно предложить использование двунаправленного вычисляемого свойства с сеттером:
 

docs/ru/guide/getters.md

@@ -34,7 +34,7 @@ const store = new Vuex.Store({
 });
 ```
 
-### Стиль обращения как к свойствам
+## Стиль обращения как к свойствам
 
 Геттеры доступны в объекте `store.getters`, и вы можете получить доступ к значениям как свойствам:
 
@@ -69,7 +69,7 @@ computed: {
 
 Обратите внимание, что геттеры, доступ к которым выполняется как к свойствам, будут кэшироваться как часть системы реактивности Vue.
 
-### Стиль обращения как к методам
+## Стиль обращения как к методам
 
 Можно также передавать аргументы геттерам, возвращая функцию. Это например пригодится, когда необходимо возвращать массив по указанному критерию:
 
@@ -88,7 +88,7 @@ store.getters.getTodoById(2); // -> { id: 2, text: '...', done: false }
 
 Обратите внимание, что геттеры, доступ к которым выполняется как к методам, будут запускаться каждый раз при их вызове, а результаты не будут кэшироваться.
 
-### Вспомогательная функция `mapGetters`
+## Вспомогательная функция `mapGetters`
 
 Функция `mapGetters` просто проксирует геттеры хранилища в локальные вычисляемые свойства компонента:
 

docs/ru/guide/modules.md

@@ -2,7 +2,7 @@
 
 <div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/cqKK4psq" target="_blank" rel="noopener noreferrer">Пройдите этот урок на Scrimba</a></div>
 
-Из-за использования единого дерева состояния, все глобальные данные приложения оказываются помещены в один большой объект. По мере роста приложения, хранилище может существенно раздуться.
+Благодаря использованию единого дерева состояния, все состояния приложения содержатся внутри одного большого объекта. Однако, по мере роста и масштабировании приложения, хранилище может существенно раздуться.
 
 Чтобы помочь в этой беде, Vuex позволяет разделять хранилище на **модули**. Каждый модуль может содержать собственное состояние, мутации, действия, геттеры и даже встроенные подмодули — структура фрактальна:
 
@@ -31,7 +31,7 @@ store.state.a // -> состояние модуля `moduleA`
 store.state.b // -> состояние модуля `moduleB`
 ```
 
-### Локальное состояние модулей
+## Локальное состояние модулей
 
 Первым аргументом, который получает мутации и геттеры, будет **локальное состояние модуля**.
 
@@ -83,7 +83,7 @@ const moduleA = {
 };
 ```
 
-### Пространства имён
+## Пространства имён
 
 По умолчанию действия, мутации и геттеры внутри модулей регистрируются в **глобальном пространстве имён** — это позволяет нескольким модулям реагировать на тот же тип мутаций/действий.
 
@@ -134,7 +134,7 @@ const store = new Vuex.Store({
 
 Геттеры и действия с собственным пространством имён будут получать свои локальные `getters`, `dispatch` и `commit`. Другими словами, вы можете использовать содержимое модуля без написания префиксов в том же модуле. Переключения между пространствами имён не влияет на код внутри модуля.
 
-#### Доступ к глобальному содержимому в модулях со своим пространством имён
+### Доступ к глобальному содержимому в модулях со своим пространством имён
 
 Если вы хотите использовать глобальное состояние и геттеры, `rootState` и `rootGetters` передаются 3-м и 4-м аргументами в функции геттеров, а также как свойства в объекте `context`, передаваемом в функции действий.
 
@@ -176,7 +176,7 @@ modules: {
 }
 ```
 
-#### Регистрация глобального действия в модуле с собственным пространством имён
+### Регистрация глобального действия в модуле с собственным пространством имён
 
 Если вы хотите зарегистрировать глобальное действие в модуле с собственным пространством имён, вы можете пометить его с помощью `root: true` и поместить определение действия в функцию `handler`. Например:
 
@@ -202,7 +202,7 @@ modules: {
 }
 ```
 
-#### Подключение с помощью вспомогательных функций к пространству имён
+### Подключение с помощью вспомогательных функций к пространству имён
 
 Подключение модуля со своим пространством имён к компонентам с помощью вспомогательных функций `mapState`, `mapGetters`, `mapActions` и `mapMutations` это может выглядеть подобным образом:
 
@@ -268,7 +268,7 @@ export default {
 };
 ```
 
-#### Уточнение для разработчиков плагинов
+### Уточнение для разработчиков плагинов
 
 Вас может обеспокоить непредсказуемость пространства имён для ваших модулей, когда вы создаёте [плагин](plugins.md) с собственными модулями и возможностью пользователям добавлять их в хранилище Vuex. Ваши модули будут также помещены в пространство имён, если пользователи плагина добавляют ваши модули в модуль со своим пространством имён. Чтобы приспособиться к этой ситуации, вам может потребоваться получить значение пространства имён через настройки плагина:
 
@@ -284,7 +284,7 @@ export function createPlugin(options = {}) {
 }
 ```
 
-### Динамическая регистрация модулей
+## Динамическая регистрация модулей
 
 Вы можете зарегистрировать модуль уже и **после** того, как хранилище было создано, используя метод `store.registerModule`:
 
@@ -312,13 +312,13 @@ store.registerModule(['nested', 'myModule'], {
 
 Обратите внимание, что можно проверить, зарегистрирован ли уже модуль с заданным именем с помощью метода `store.hasModule(moduleName)`.
 
-#### Сохранение состояния
+### Сохранение состояния
 
 Вероятно, вы хотите сохранить предыдущее состояние при регистрации нового модуля, например сохранить состояние из приложения с рендерингом на стороне сервера. Вы можете этого добиться с помощью опции `preserveState`: `store.registerModule('a', module, { preserveState: true })`.
 
 При использовании `preserveState: true` модуль регистрируется, действия, мутации и геттеры добавляются в хранилище, а состояние нет. Предполагается, что состояние вашего хранилища уже содержит состояние для этого модуля и нет необходимости его перезаписывать.
 
-### Повторное использование модулей
+## Повторное использование модулей
 
 Иногда нам может потребоваться создать несколько экземпляров модуля, например:
 

docs/ru/guide/mutations.md

@@ -24,7 +24,7 @@ const store = new Vuex.Store({
 store.commit('increment');
 ```
 
-### Мутации с нагрузкой
+## Мутации с нагрузкой
 
 При вызове `store.commit` в мутацию можно также передать дополнительный параметр, называемый **нагрузкой (`payload`)**:
 
@@ -58,7 +58,7 @@ store.commit('increment', {
 });
 ```
 
-### Объектный синтаксис
+## Объектный синтаксис
 
 Другой способ вызвать мутацию — это передать в commit единственный параметр, в котором `type` указан напрямую:
 
@@ -79,7 +79,7 @@ mutations: {
 }
 ```
 
-### Мутации следуют правилам реактивности Vue
+## Мутации следуют правилам реактивности Vue
 
 Поскольку состояние хранилища Vuex — это реактивная переменная Vue, при возникновении мутации зависящие от этого состояния компоненты Vue обновляются автоматически. Кроме того, это значит, что мутации Vuex имеют те же самые подводные камни, что и реактивность в обычном Vue:
 
@@ -95,7 +95,7 @@ mutations: {
     state.obj = { ...state.obj, newProp: 123 };
     ```
 
-### Использование констант для обозначения типов мутаций
+## Использование констант для обозначения типов мутаций
 
 В различных вариантах реализации Flux этот подход используется весьма часто. Вынесите все константы с типами мутаций и действий в отдельный файл, чтобы было проще использовать линтеры и другие инструменты, а также чтобы дать читателям возможность с первого взгляда понять, какие мутации возможны в приложении:
 
@@ -123,7 +123,7 @@ const store = new Vuex.Store({
 
 Тем не менее, использовать константы для указания типов мутаций совершенно необязательно, хотя это и может оказаться полезным в крупных проектах.
 
-### Мутации должны быть синхронными
+## Мутации должны быть синхронными
 
 Нужно помнить одно важное правило: **обработчики мутаций обязаны быть синхронными**. Почему? Рассмотрим пример:
 
@@ -139,7 +139,7 @@ mutations: {
 
 Теперь представьте, что вы отлаживаете приложение и смотрите в лог мутаций в инструментах разработчика. Для каждой залогированной мутации devtools должен сохранить слепки состояния приложения "до" и "после" её наступления. Однако, асинхронный коллбэк внутри приведённой выше мутации делает это невозможным: мутация-то уже записана, и у devtools нет никакой возможности знать, что далее будет вызван коллбэк, а, значит, и инициируемые им изменения становится, по сути дела, невозможно отследить.
 
-### Вызов мутаций в компонентах
+## Вызов мутаций в компонентах
 
 Мутации можно вызывать из кода компонентов, используя `this.$store.commit('xxx')`, или применяя вспомогательный метод `mapMutations`, который проксирует вызовы `store.commit` через методы компонентов (для этого требуется наличие корневой ссылки на хранилище `$store`):
 
@@ -162,7 +162,7 @@ export default {
 };
 ```
 
-### О действиях
+## О действиях
 
 Привнесение асинхронности в мутации могло бы изрядно затруднить понимание логики программы. Например, если вызываются два метода, оба с асинхронными коллбэками, изменяющими состояние приложения — как предсказать, какой из коллбэков будет вызван первым? Именно поэтому концепции изменений и асинхронности рассматриваются по отдельности. Во Vuex **мутации — это синхронные транзакции**:
 

docs/ru/guide/plugins.md

@@ -23,7 +23,7 @@ const store = new Vuex.Store({
 });
 ```
 
-### Вызов мутаций из плагинов
+## Вызов мутаций из плагинов
 
 Плагинам не разрешается напрямую изменять состояние приложения — как и компоненты, они могут только вызывать изменения опосредованно, используя мутации.
 
@@ -54,7 +54,7 @@ const store = new Vuex.Store({
 });
 ```
 
-### Снятие слепков состояния
+## Снятие слепков состояния
 
 Иногда плагину может потребоваться "снять слепок" состояния приложения или сравнить состояния "до" и "после" мутации. Для этого используйте глубокое копирование объекта состояния:
 
@@ -83,7 +83,7 @@ const store = new Vuex.Store({
 
 Плагин будет использоваться по умолчанию. В production-окружении вам понадобится [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) для webpack, или [envify](https://github.com/hughsk/envify) для Browserify, чтобы изменить значение `process.env.NODE_ENV !== 'production'` на `false` в финальной сборке.
 
-### Встроенный плагин логирования
+## Встроенный плагин логирования
 
 > Если вы используете [vue-devtools](https://github.com/vuejs/vue-devtools), вам он скорее всего не понадобится
 
@@ -140,11 +140,11 @@ const logger = createLogger({
 
 Обратите внимание, что этот плагин делает слепки состояний, поэтому использовать его стоит только на этапе разработки.
 
-#### Vuex до версии 3.5.0
+### Vuex до версии 3.5.0
 
 До версии 3.5.0 функция `createLogger` экспортировалась по следующему пути `vuex/dist/logger`.
 
-``` js
+```js
 import createLogger from 'vuex/dist/logger'
 const store = new Vuex.Store({
   plugins: [createLogger()]

docs/ru/guide/state.md

@@ -1,6 +1,6 @@
 # Состояние
 
-### Единое дерево состояния
+## Единое дерево состояния
 
 <div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/cWw3Zhb" target="_blank" rel="noopener noreferrer">Пройдите этот урок на Scrimba</a></div>
 
@@ -10,7 +10,7 @@ Vuex использует **единое дерево состояния** —
 
 Данные, которые хранятся во Vuex должны следовать тем же правилам, что и `data` в экземпляре Vue, т.е. объект состояния должен быть простым. **См. также:** [Vue#data](https://ru.vuejs.org/v2/api/#data).
 
-### Использование состояния Vuex в компонентах Vue
+## Использование состояния Vuex в компонентах Vue
 
 Итак, как использовать состояние хранилища в компонентах Vue? Поскольку хранилище Vuex реактивно, самый простой способ «получения» — просто вернуть часть состояния хранилища в [вычисляемом свойстве](https://ru.vuejs.org/v2/guide/computed.html):
 
@@ -60,7 +60,7 @@ const Counter = {
 };
 ```
 
-### Вспомогательная функция `mapState`
+## Вспомогательная функция `mapState`
 
 <div class="scrimba"><a href="https://scrimba.com/p/pnyzgAP/c8Pz7BSK" target="_blank" rel="noopener noreferrer">Пройдите этот урок на Scrimba</a></div>
 
@@ -97,7 +97,7 @@ computed: mapState([
 ]);
 ```
 
-### Оператор распространения объектов
+## Оператор распространения объектов
 
 Обратите внимание, `mapState` возвращает объект. Как же его использовать в сочетании с другими локальными вычисляемыми свойствами? Для этого обычно приходилось использовать вспомогательные утилиты для объединения нескольких объектов в один, который передавать в `computed`. Однако, с помощью [оператора распространения объектов](https://github.com/tc39/proposal-object-rest-spread) можно значительно упростить синтаксис:
 
@@ -111,6 +111,6 @@ computed: {
 }
 ```
 
-### Компоненты всё ещё могут иметь локальное состояние
+## Компоненты всё ещё могут иметь локальное состояние
 
 Использование Vuex **не означает, что нужно выносить всё состояние** в хранилище. Хотя перемещение большей части состояния во Vuex, сделает мутации более явными и удобными для отладки, это также может привести к многословности и ненужному усложнению логики. Если часть состояния относится только к одному компоненту, лучше оставить его в качестве локального состояния. Вы должны взвесить все компромиссы и принять решение, соответствующее потребностям приложения и вектора его развития.

docs/ru/guide/strict.md

@@ -11,7 +11,7 @@ const store = new Vuex.Store({
 
 В строгом режиме любая попытка внесения изменений в состояние Vuex, кроме мутаций, будет выбрасывать ошибку. Это гарантирует, что все мутации состояния будут явно отслеживаться через инструменты отладки.
 
-### Разработка vs production
+## Разработка vs production
 
 **Не используйте строгий режим в production!** Строгий режим запускает глубокое отслеживание за деревом состояния приложения в синхронном режиме для обнаружения несоответствующих мутаций, и это может быть затратным для производительности, когда совершается большое количество мутаций. Убедитесь, что выключили этот режим в production чтобы избежать ухудшения производительности.
 

docs/ru/installation.md

@@ -1,6 +1,6 @@
 # Установка
 
-### Скачивание напрямую / CDN
+## Скачивание напрямую / CDN
 
 [https://unpkg.com/vuex](https://unpkg.com/vuex)
 
@@ -17,30 +17,50 @@
 <script src="/path/to/vuex.js"></script>
 ```
 
-### NPM
+## NPM
 
 ```bash
 npm install vuex --save
+
+# При использовании Vue 3.0 + Vuex 4.0:
+npm install vuex@next --save
 ```
 
-### Yarn
+## Yarn
 
 ```bash
 yarn add vuex
+
+# При использовании Vue 3.0 + Vuex 4.0:
+yarn add vuex@next --save
 ```
 
-При использовании системы сборки — явно установите Vuex с помощью команды `Vue.use()`:
+При использовании системы сборки необходимо явно устанавливать как плагин:
+
+### Для Vue 2
 
 ```js
-import Vue from 'vue';
+import Vue from 'vue'
-import Vuex from 'vuex';
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+```
+
+### Для Vue 3
+
+```js
+import { createApp } from 'vue'
+import { createStore } from 'vuex'
+
+const app = createApp({ ... })
+const store = createStore({ ... })
 
-Vue.use(Vuex);
+app.use(store)
 ```
 
 При использовании глобальных тегов `<script>` в этом нет необходимости.
 
-### Promise
+## Promise
 
 Vuex использует в своей работе [Promise](https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Ispolzovanie_promisov). Если необходимо поддерживать старые браузеры, которые не реализуют Promise (например, IE) — добавьте полифил, например [es6-promise](https://github.com/stefanpenner/es6-promise).
 
@@ -65,7 +85,7 @@ yarn add es6-promise # Yarn
 import 'es6-promise/auto';
 ```
 
-### Версия для разработки
+## Версия для разработки
 
 Для использования самой новой dev-сборки `vuex` — склонируйте репозиторий с GitHub вручную и запустите сборку: