From cf5974c0beac1ce06bb3b9488028700c6baee0b1 Mon Sep 17 00:00:00 2001 From: Alexander Sokolov Date: Fri, 30 Oct 2020 13:44:16 +0300 Subject: [PATCH 01/50] docs(ru): translation update (#1858) Co-authored-by: Alex Sokolov <4497128+Alex-Sokolov@users.noreply.github.com> --- docs/ru/README.md | 4 ++-- docs/ru/api/README.md | 34 +++++++++++++++++++++------------- docs/ru/guide/README.md | 21 ++++++++++++++++++++- docs/ru/guide/actions.md | 6 +++--- docs/ru/guide/forms.md | 2 +- docs/ru/guide/getters.md | 6 +++--- docs/ru/guide/modules.md | 20 ++++++++++---------- docs/ru/guide/mutations.md | 14 +++++++------- docs/ru/guide/plugins.md | 10 +++++----- docs/ru/guide/state.md | 10 +++++----- docs/ru/guide/strict.md | 2 +- docs/ru/installation.md | 38 +++++++++++++++++++++++++++++--------- 12 files changed, 107 insertions(+), 60 deletions(-) diff --git a/docs/ru/README.md b/docs/ru/README.md index 29dbc3958..dd9bfb9b9 100644 --- a/docs/ru/README.md +++ b/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 помогает управлять совместно используемым состоянием ценой привнесения новых концепций и вспомогательного кода. Компромисс, когда кратковременная продуктивность страдает на благо долгосрочной. diff --git a/docs/ru/api/README.md b/docs/ru/api/README.md index 6d6de240b..33f693883 100644 --- a/docs/ru/api/README.md +++ b/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) => { - console.log(mutation.type); - console.log(mutation.payload); -}); +const unsubscribe = store.subscribe((mutation, state) => { + console.log(mutation.type) + 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) => { - console.log(action.type); - console.log(action.payload); -}); +const unsubscribe = store.subscribeAction((action, state) => { + console.log(action.type) + 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}`) diff --git a/docs/ru/guide/README.md b/docs/ru/guide/README.md index 173771d3a..f00242b9d 100644 --- a/docs/ru/guide/README.md +++ b/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 diff --git a/docs/ru/guide/actions.md b/docs/ru/guide/actions.md index 3c75343c7..c55177e57 100644 --- a/docs/ru/guide/actions.md +++ b/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 { }; ``` -### Композиция действий +## Композиция действий Раз действия зачастую асинхронны, то как узнать, что действие уже завершилось? И, что важнее, как быть со связанными между собой действиями при организации более сложных асинхронных потоков? diff --git a/docs/ru/guide/forms.md b/docs/ru/guide/forms.md index 239c16ef2..70fb8f2d3 100644 --- a/docs/ru/guide/forms.md +++ b/docs/ru/guide/forms.md @@ -41,7 +41,7 @@ mutations: { } ``` -### Двунаправленные вычисляемые свойства +## Двунаправленные вычисляемые свойства Заметно, что получившаяся выше запись — куда многословнее, чем используемая в связке `v-model` с локальным состоянием, да и некоторые полезные возможности `v-model` мы таким образом упускаем. В качестве альтернативы можно предложить использование двунаправленного вычисляемого свойства с сеттером: diff --git a/docs/ru/guide/getters.md b/docs/ru/guide/getters.md index b04f228d6..214bfc38a 100644 --- a/docs/ru/guide/getters.md +++ b/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` просто проксирует геттеры хранилища в локальные вычисляемые свойства компонента: diff --git a/docs/ru/guide/modules.md b/docs/ru/guide/modules.md index 5c8a79854..3af406682 100644 --- a/docs/ru/guide/modules.md +++ b/docs/ru/guide/modules.md @@ -2,7 +2,7 @@
Пройдите этот урок на Scrimba
-Из-за использования единого дерева состояния, все глобальные данные приложения оказываются помещены в один большой объект. По мере роста приложения, хранилище может существенно раздуться. +Благодаря использованию единого дерева состояния, все состояния приложения содержатся внутри одного большого объекта. Однако, по мере роста и масштабировании приложения, хранилище может существенно раздуться. Чтобы помочь в этой беде, 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` модуль регистрируется, действия, мутации и геттеры добавляются в хранилище, а состояние нет. Предполагается, что состояние вашего хранилища уже содержит состояние для этого модуля и нет необходимости его перезаписывать. -### Повторное использование модулей +## Повторное использование модулей Иногда нам может потребоваться создать несколько экземпляров модуля, например: diff --git a/docs/ru/guide/mutations.md b/docs/ru/guide/mutations.md index b6e4df042..0a3d7dc2c 100644 --- a/docs/ru/guide/mutations.md +++ b/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 **мутации — это синхронные транзакции**: diff --git a/docs/ru/guide/plugins.md b/docs/ru/guide/plugins.md index f4c808da0..b4584ad56 100644 --- a/docs/ru/guide/plugins.md +++ b/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()] diff --git a/docs/ru/guide/state.md b/docs/ru/guide/state.md index 2abd3f26c..582bc13c8 100644 --- a/docs/ru/guide/state.md +++ b/docs/ru/guide/state.md @@ -1,6 +1,6 @@ # Состояние -### Единое дерево состояния +## Единое дерево состояния
Пройдите этот урок на Scrimba
@@ -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`
Пройдите этот урок на Scrimba
@@ -97,7 +97,7 @@ computed: mapState([ ]); ``` -### Оператор распространения объектов +## Оператор распространения объектов Обратите внимание, `mapState` возвращает объект. Как же его использовать в сочетании с другими локальными вычисляемыми свойствами? Для этого обычно приходилось использовать вспомогательные утилиты для объединения нескольких объектов в один, который передавать в `computed`. Однако, с помощью [оператора распространения объектов](https://github.com/tc39/proposal-object-rest-spread) можно значительно упростить синтаксис: @@ -111,6 +111,6 @@ computed: { } ``` -### Компоненты всё ещё могут иметь локальное состояние +## Компоненты всё ещё могут иметь локальное состояние Использование Vuex **не означает, что нужно выносить всё состояние** в хранилище. Хотя перемещение большей части состояния во Vuex, сделает мутации более явными и удобными для отладки, это также может привести к многословности и ненужному усложнению логики. Если часть состояния относится только к одному компоненту, лучше оставить его в качестве локального состояния. Вы должны взвесить все компромиссы и принять решение, соответствующее потребностям приложения и вектора его развития. diff --git a/docs/ru/guide/strict.md b/docs/ru/guide/strict.md index 0ab880209..996a5f7dd 100644 --- a/docs/ru/guide/strict.md +++ b/docs/ru/guide/strict.md @@ -11,7 +11,7 @@ const store = new Vuex.Store({ В строгом режиме любая попытка внесения изменений в состояние Vuex, кроме мутаций, будет выбрасывать ошибку. Это гарантирует, что все мутации состояния будут явно отслеживаться через инструменты отладки. -### Разработка vs production +## Разработка vs production **Не используйте строгий режим в production!** Строгий режим запускает глубокое отслеживание за деревом состояния приложения в синхронном режиме для обнаружения несоответствующих мутаций, и это может быть затратным для производительности, когда совершается большое количество мутаций. Убедитесь, что выключили этот режим в production чтобы избежать ухудшения производительности. diff --git a/docs/ru/installation.md b/docs/ru/installation.md index 689704445..77d95185b 100644 --- a/docs/ru/installation.md +++ b/docs/ru/installation.md @@ -1,6 +1,6 @@ # Установка -### Скачивание напрямую / CDN +## Скачивание напрямую / CDN [https://unpkg.com/vuex](https://unpkg.com/vuex) @@ -17,30 +17,50 @@ ``` -### 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 Vuex from 'vuex'; +import Vue from 'vue' +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) ``` При использовании глобальных тегов ` ``` -### NPM +## NPM ``` bash npm install vuex --save ``` -### Yarn +## Yarn ``` bash yarn add vuex @@ -38,7 +38,7 @@ Vue.use(Vuex) グローバルなスクリプトタグを利用する場合にはこのようにする必要はありません。 -### Promise +## Promise Vuex は [Promise (プロミス)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) を必要とします。ブラウザで Promise が実装されていない(例 IE)場合は、[es6-promise](https://github.com/stefanpenner/es6-promise) のようなポリフィルライブラリを使用できます。 @@ -63,7 +63,7 @@ yarn add es6-promise # Yarn import 'es6-promise/auto' ``` -### 開発版ビルド +## 開発版ビルド 最新の開発版ビルドを利用したい場合には、 Github から直接クローンし `vuex` を自身でビルドする必要があります。 diff --git a/docs/zh/README.md b/docs/zh/README.md index 49fe9e911..24a0bb4cc 100644 --- a/docs/zh/README.md +++ b/docs/zh/README.md @@ -2,7 +2,7 @@ Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式**。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 [devtools extension](https://github.com/vuejs/vue-devtools),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 -### 什么是“状态管理模式”? +## 什么是“状态管理模式”? 让我们从一个简单的 Vue 计数应用开始: @@ -56,7 +56,7 @@ new Vue({ ![vuex](/vuex.png) -### 什么情况下我应该使用 Vuex? +## 什么情况下我应该使用 Vuex? Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md index 373d65183..08a4d8d4b 100644 --- a/docs/zh/guide/README.md +++ b/docs/zh/guide/README.md @@ -8,7 +8,7 @@ 2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地**提交 (commit) mutation**。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。 -### 最简单的 Store +## 最简单的 Store :::tip 提示 我们将在后续的文档示例代码中使用 ES2015 语法。如果你还没能掌握 ES2015,[你得抓紧了](https://babeljs.io/docs/learn-es2015/)! diff --git a/docs/zh/guide/actions.md b/docs/zh/guide/actions.md index a829af4d0..9d62b6d4d 100644 --- a/docs/zh/guide/actions.md +++ b/docs/zh/guide/actions.md @@ -39,7 +39,7 @@ actions: { } ``` -### 分发 Action +## 分发 Action Action 通过 `store.dispatch` 方法触发: @@ -97,7 +97,7 @@ actions: { 注意我们正在进行一系列的异步操作,并且通过提交 mutation 来记录 action 产生的副作用(即状态变更)。 -### 在组件中分发 Action +## 在组件中分发 Action 你在组件中使用 `this.$store.dispatch('xxx')` 分发 action,或者使用 `mapActions` 辅助函数将组件的 methods 映射为 `store.dispatch` 调用(需要先在根节点注入 `store`): @@ -120,7 +120,7 @@ export default { } ``` -### 组合 Action +## 组合 Action Action 通常是异步的,那么如何知道 action 什么时候结束呢?更重要的是,我们如何才能组合多个 action,以处理更加复杂的异步流程? diff --git a/docs/zh/guide/forms.md b/docs/zh/guide/forms.md index 0aa449c58..a604906dc 100644 --- a/docs/zh/guide/forms.md +++ b/docs/zh/guide/forms.md @@ -40,7 +40,7 @@ mutations: { } ``` -### 双向绑定的计算属性 +## 双向绑定的计算属性 必须承认,这样做比简单地使用“`v-model` + 局部状态”要啰嗦得多,并且也损失了一些 `v-model` 中很有用的特性。另一个方法是使用带有 setter 的双向绑定计算属性: diff --git a/docs/zh/guide/getters.md b/docs/zh/guide/getters.md index 5ec82b33a..60a58887d 100644 --- a/docs/zh/guide/getters.md +++ b/docs/zh/guide/getters.md @@ -34,7 +34,7 @@ const store = new Vuex.Store({ }) ``` -### 通过属性访问 +## 通过属性访问 Getter 会暴露为 `store.getters` 对象,你可以以属性的形式访问这些值: @@ -69,7 +69,7 @@ computed: { 注意,getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。 -### 通过方法访问 +## 通过方法访问 你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。 @@ -88,7 +88,7 @@ store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } 注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。 -### `mapGetters` 辅助函数 +## `mapGetters` 辅助函数 `mapGetters` 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: diff --git a/docs/zh/guide/modules.md b/docs/zh/guide/modules.md index d6e7b7f4a..4f0b848be 100644 --- a/docs/zh/guide/modules.md +++ b/docs/zh/guide/modules.md @@ -31,7 +31,7 @@ store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态 ``` -### 模块的局部状态 +## 模块的局部状态 对于模块内部的 mutation 和 getter,接收的第一个参数是**模块的局部状态对象**。 @@ -83,7 +83,7 @@ const moduleA = { } ``` -### 命名空间 +## 命名空间 默认情况下,模块内部的 action、mutation 和 getter 是注册在**全局命名空间**的——这样使得多个模块能够对同一 mutation 或 action 作出响应。 @@ -134,7 +134,7 @@ const store = new Vuex.Store({ 启用了命名空间的 getter 和 action 会收到局部化的 `getter`,`dispatch` 和 `commit`。换言之,你在使用模块内容(module assets)时不需要在同一模块内额外添加空间名前缀。更改 `namespaced` 属性后不需要修改模块内的代码。 -#### 在带命名空间的模块内访问全局内容(Global Assets) +### 在带命名空间的模块内访问全局内容(Global Assets) 如果你希望使用全局 state 和 getter,`rootState` 和 `rootGetters` 会作为第三和第四参数传入 getter,也会通过 `context` 对象的属性传入 action。 @@ -174,7 +174,7 @@ modules: { } ``` -#### 在带命名空间的模块注册全局 action +### 在带命名空间的模块注册全局 action 若需要在带命名空间的模块注册全局 action,你可添加 `root: true`,并将这个 action 的定义放在函数 `handler` 中。例如: @@ -200,7 +200,7 @@ modules: { } ``` -#### 带命名空间的绑定函数 +### 带命名空间的绑定函数 当使用 `mapState`, `mapGetters`, `mapActions` 和 `mapMutations` 这些函数来绑定带命名空间的模块时,写起来可能比较繁琐: @@ -261,7 +261,7 @@ export default { } ``` -#### 给插件开发者的注意事项 +### 给插件开发者的注意事项 如果你开发的[插件(Plugin)](plugins.md)提供了模块并允许用户将其添加到 Vuex store,可能需要考虑模块的空间名称问题。对于这种情况,你可以通过插件的参数对象来允许用户指定空间名称: @@ -277,7 +277,7 @@ export function createPlugin (options = {}) { } ``` -### 模块动态注册 +## 模块动态注册 在 store 创建**之后**,你可以使用 `store.registerModule` 方法注册模块: @@ -304,13 +304,13 @@ store.registerModule(['nested', 'myModule'], { 注意,你可以通过 `store.hasModule(moduleName)` 方法检查该模块是否已经被注册到 store。 -#### 保留 state +### 保留 state 在注册一个新 module 时,你很有可能想保留过去的 state,例如从一个服务端渲染的应用保留 state。你可以通过 `preserveState` 选项将其归档:`store.registerModule('a', module, { preserveState: true })`。 当你设置 `preserveState: true` 时,该模块会被注册,action、mutation 和 getter 会被添加到 store 中,但是 state 不会。这里假设 store 的 state 已经包含了这个 module 的 state 并且你不希望将其覆写。 -### 模块重用 +## 模块重用 有时我们可能需要创建一个模块的多个实例,例如: diff --git a/docs/zh/guide/mutations.md b/docs/zh/guide/mutations.md index f03e49dae..11abe7a52 100644 --- a/docs/zh/guide/mutations.md +++ b/docs/zh/guide/mutations.md @@ -24,7 +24,7 @@ const store = new Vuex.Store({ store.commit('increment') ``` -### 提交载荷(Payload) +## 提交载荷(Payload) 你可以向 `store.commit` 传入额外的参数,即 mutation 的 **载荷(payload)**: @@ -57,7 +57,7 @@ store.commit('increment', { }) ``` -### 对象风格的提交方式 +## 对象风格的提交方式 提交 mutation 的另一种方式是直接使用包含 `type` 属性的对象: @@ -78,7 +78,7 @@ mutations: { } ``` -### Mutation 需遵守 Vue 的响应规则 +## Mutation 需遵守 Vue 的响应规则 既然 Vuex 的 store 中的状态是响应式的,那么当我们变更状态时,监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项: @@ -94,7 +94,7 @@ mutations: { state.obj = { ...state.obj, newProp: 123 } ``` -### 使用常量替代 Mutation 事件类型 +## 使用常量替代 Mutation 事件类型 使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然: @@ -121,7 +121,7 @@ const store = new Vuex.Store({ 用不用常量取决于你——在需要多人协作的大型项目中,这会很有帮助。但如果你不喜欢,你完全可以不这样做。 -### Mutation 必须是同步函数 +## Mutation 必须是同步函数 一条重要的原则就是要记住 **mutation 必须是同步函数**。为什么?请参考下面的例子: @@ -137,7 +137,7 @@ mutations: { 现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。 -### 在组件中提交 Mutation +## 在组件中提交 Mutation 你可以在组件中使用 `this.$store.commit('xxx')` 提交 mutation,或者使用 `mapMutations` 辅助函数将组件中的 methods 映射为 `store.commit` 调用(需要在根节点注入 `store`)。 @@ -160,7 +160,7 @@ export default { } ``` -### 下一步:Action +## 下一步:Action 在 mutation 中混合异步调用会导致你的程序很难调试。例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?这就是为什么我们要区分这两个概念。在 Vuex 中,**mutation 都是同步事务**: diff --git a/docs/zh/guide/plugins.md b/docs/zh/guide/plugins.md index 7d31932b7..dbf738a5a 100644 --- a/docs/zh/guide/plugins.md +++ b/docs/zh/guide/plugins.md @@ -23,7 +23,7 @@ const store = new Vuex.Store({ }) ``` -### 在插件内提交 Mutation +## 在插件内提交 Mutation 在插件中不允许直接修改状态——类似于组件,只能通过提交 mutation 来触发变化。 @@ -54,7 +54,7 @@ const store = new Vuex.Store({ }) ``` -### 生成 State 快照 +## 生成 State 快照 有时候插件需要获得状态的“快照”,比较改变的前后状态。想要实现这项功能,你需要对状态对象进行深拷贝: @@ -85,7 +85,7 @@ const store = new Vuex.Store({ 上面插件会默认启用。在发布阶段,你需要使用 webpack 的 [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) 或者是 Browserify 的 [envify](https://github.com/hughsk/envify) 使 `process.env.NODE_ENV !== 'production'` 为 `false`。 -### 内置 Logger 插件 +## 内置 Logger 插件 > 如果正在使用 [vue-devtools](https://github.com/vuejs/vue-devtools),你可能不需要此插件。 diff --git a/docs/zh/guide/state.md b/docs/zh/guide/state.md index edb09fa91..c143c16b5 100644 --- a/docs/zh/guide/state.md +++ b/docs/zh/guide/state.md @@ -1,6 +1,6 @@ # State -### 单一状态树 +## 单一状态树
在 Scrimba 上尝试这节课
@@ -10,7 +10,7 @@ Vuex 使用**单一状态树**——是的,用一个对象就包含了全部 存储在 Vuex 中的数据和 Vue 实例中的 `data` 遵循相同的规则,例如状态对象必须是纯粹 (plain) 的。**参考:**[Vue#data](https://cn.vuejs.org/v2/api/#data)。 -### 在 Vue 组件中获得 Vuex 状态 +## 在 Vue 组件中获得 Vuex 状态 那么我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在[计算属性](https://cn.vuejs.org/guide/computed.html)中返回某个状态: @@ -59,7 +59,7 @@ const Counter = { } ``` -### `mapState` 辅助函数 +## `mapState` 辅助函数
在 Scrimba 上尝试这节课
@@ -95,7 +95,7 @@ computed: mapState([ ]) ``` -### 对象展开运算符 +## 对象展开运算符 `mapState` 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢?通常,我们需要使用一个工具函数将多个对象合并为一个,以使我们可以将最终对象传给 `computed` 属性。但是自从有了[对象展开运算符](https://github.com/tc39/proposal-object-rest-spread),我们可以极大地简化写法: @@ -109,6 +109,6 @@ computed: { } ``` -### 组件仍然保有局部状态 +## 组件仍然保有局部状态 使用 Vuex 并不意味着你需要将**所有的**状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。 diff --git a/docs/zh/guide/strict.md b/docs/zh/guide/strict.md index fc6175b8e..272812417 100644 --- a/docs/zh/guide/strict.md +++ b/docs/zh/guide/strict.md @@ -11,7 +11,7 @@ const store = new Vuex.Store({ 在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。 -### 开发环境与发布环境 +## 开发环境与发布环境 **不要在发布环境下启用严格模式**!严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式,以避免性能损失。 diff --git a/docs/zh/guide/testing.md b/docs/zh/guide/testing.md index 1084c5217..6a8e1d7f2 100644 --- a/docs/zh/guide/testing.md +++ b/docs/zh/guide/testing.md @@ -4,7 +4,7 @@ 我们主要想针对 Vuex 中的 mutation 和 action 进行单元测试。 -### 测试 Mutation +## 测试 Mutation Mutation 很容易被测试,因为它们仅仅是一些完全依赖参数的函数。这里有一个小技巧,如果你在 `store.js` 文件中定义了 mutation,并且使用 ES2015 模块功能默认输出了 Vuex.Store 的实例,那么你仍然可以给 mutation 取个变量名然后把它输出去: @@ -49,7 +49,7 @@ describe('mutations', () => { }) ``` -### 测试 Action +## 测试 Action Action 应对起来略微棘手,因为它们可能需要调用外部的 API。当测试 action 的时候,我们需要增加一个 mocking 服务层——例如,我们可以把 API 调用抽象成服务,然后在测试文件中用 mock 服务回应 API 调用。为了便于解决 mock 依赖,可以用 webpack 和 [inject-loader](https://github.com/plasticine/inject-loader) 打包测试文件。 @@ -145,7 +145,7 @@ describe('actions', () => { }) ``` -### 测试 Getter +## 测试 Getter 如果你的 getter 包含很复杂的计算过程,很有必要测试它们。Getter 的测试与 mutation 一样直截了当。 @@ -192,11 +192,11 @@ describe('getters', () => { }) ``` -### 执行测试 +## 执行测试 如果你的 mutation 和 action 编写正确,经过合理地 mocking 处理之后这些测试应该不依赖任何浏览器 API,因此你可以直接用 webpack 打包这些测试文件然后在 Node 中执行。换种方式,你也可以用 `mocha-loader` 或 Karma + `karma-webpack`在真实浏览器环境中进行测试。 -#### 在 Node 中执行测试 +### 在 Node 中执行测试 创建以下 webpack 配置(配置好 [`.babelrc`](https://babeljs.io/docs/usage/babelrc/)): @@ -227,13 +227,13 @@ webpack mocha test-bundle.js ``` -#### 在浏览器中测试 +### 在浏览器中测试 1. 安装 `mocha-loader`。 2. 把上述 webpack 配置中的 `entry` 改成 `'mocha-loader!babel-loader!./test.js'`。 3. 用以上配置启动 `webpack-dev-server`。 4. 访问 `localhost:8080/webpack-dev-server/test-bundle`。 -#### 使用 Karma + karma-webpack 在浏览器中执行测试 +### 使用 Karma + karma-webpack 在浏览器中执行测试 详见 [vue-loader documentation](https://vuejs.github.io/vue-loader/workflow/testing.html)。 diff --git a/docs/zh/installation.md b/docs/zh/installation.md index 1d92e19f4..9fe54dc63 100644 --- a/docs/zh/installation.md +++ b/docs/zh/installation.md @@ -1,6 +1,6 @@ # 安装 -### 直接下载 / CDN 引用 +## 直接下载 / CDN 引用 [https://unpkg.com/vuex](https://unpkg.com/vuex) @@ -15,13 +15,13 @@ ``` -### NPM +## NPM ``` bash npm install vuex --save ``` -### Yarn +## Yarn ``` bash yarn add vuex @@ -38,7 +38,7 @@ Vue.use(Vuex) 当使用全局 script 标签引用 Vuex 时,不需要以上安装过程。 -### Promise +## Promise Vuex 依赖 [Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises)。如果你支持的浏览器并没有实现 Promise (比如 IE),那么你可以使用一个 polyfill 的库,例如 [es6-promise](https://github.com/stefanpenner/es6-promise)。 @@ -63,7 +63,7 @@ yarn add es6-promise # Yarn import 'es6-promise/auto' ``` -### 自己构建 +## 自己构建 如果需要使用 dev 分支下的最新版本,您可以直接从 GitHub 上克隆代码并自己构建。 From 0f80c193cef216c454923fd9060e9c3bdf2c7111 Mon Sep 17 00:00:00 2001 From: zhangenming <282126346@qq.com> Date: Wed, 10 Nov 2021 18:49:59 +0800 Subject: [PATCH 46/50] chore: typo fix in the comment (#2086) --- src/helpers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers.js b/src/helpers.js index 0b2aac7bc..ddd1bcc65 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -140,7 +140,7 @@ export const createNamespacedHelpers = (namespace) => ({ * normalizeMap([1, 2, 3]) => [ { key: 1, val: 1 }, { key: 2, val: 2 }, { key: 3, val: 3 } ] * normalizeMap({a: 1, b: 2, c: 3}) => [ { key: 'a', val: 1 }, { key: 'b', val: 2 }, { key: 'c', val: 3 } ] * @param {Array|Object} map - * @return {Object} + * @return {Array} */ function normalizeMap (map) { if (!isValidMap(map)) { From 71108575fab42b210b5eb643c30165a82b6e9a10 Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 18 Jan 2022 17:18:14 +0800 Subject: [PATCH 47/50] chore: update readme links [ci skip] --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d8371a587..a5a0ce523 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ # Vuex [![npm](https://img.shields.io/npm/v/vuex.svg)](https://npmjs.com/package/vuex) -[![ci status](https://circleci.com/gh/vuejs/vuex/tree/dev.png?style=shield)](https://circleci.com/gh/vuejs/vuex) +[![ci status](https://circleci.com/gh/vuejs/vuex/tree/3.x.png?style=shield)](https://circleci.com/gh/vuejs/vuex) --- -:fire: **HEADS UP!** You're currently looking at Vuex 3 branch. If you're looking for Vuex 4, [please check out `4.0` branch](https://github.com/vuejs/vuex/tree/4.0). +:fire: **HEADS UP!** You're currently looking at Vuex 3 branch. If you're looking for Vuex 4, [please check out `main` branch](https://github.com/vuejs/vuex/tree/main). --- From 245970803dc8895d62b96f2cf44025979a946d05 Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 7 Feb 2022 11:34:31 +0800 Subject: [PATCH 48/50] docs: disable algolia --- docs/.vuepress/config.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index f0b2a4d6f..6689a45b6 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -45,10 +45,10 @@ module.exports = { serviceWorker: true, theme: '@vuepress/vue', themeConfig: { - algolia: { - apiKey: '97f135e4b5f5487fb53f0f2dae8db59d', - indexName: 'vuex', - }, + // algolia: { + // apiKey: '97f135e4b5f5487fb53f0f2dae8db59d', + // indexName: 'vuex', + // }, repo: 'vuejs/vuex', docsDir: 'docs', locales: { From 28630911b847ac36ac96e73fed7df9c07611defb Mon Sep 17 00:00:00 2001 From: Evan You Date: Mon, 7 Feb 2022 11:47:08 +0800 Subject: [PATCH 49/50] docs: update v4 links --- docs/.vuepress/config.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 6689a45b6..11be6657d 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -63,7 +63,7 @@ module.exports = { { text: 'v3.x', items: [ - { text: 'v4.x', link: 'https://next.vuex.vuejs.org/' } + { text: 'v4.x', link: 'https://vuex.vuejs.org/' } ] } ], @@ -113,7 +113,7 @@ module.exports = { { text: 'v3.x', items: [ - { text: 'v4.x', link: 'https://next.vuex.vuejs.org/' } + { text: 'v4.x', link: 'https://vuex.vuejs.org/zh/' } ] } ], @@ -163,7 +163,7 @@ module.exports = { { text: 'v3.x', items: [ - { text: 'v4.x', link: 'https://next.vuex.vuejs.org/' } + { text: 'v4.x', link: 'https://vuex.vuejs.org/ja/' } ] } ], @@ -213,7 +213,7 @@ module.exports = { { text: 'v3.x', items: [ - { text: 'v4.x', link: 'https://next.vuex.vuejs.org/' } + { text: 'v4.x', link: 'https://vuex.vuejs.org/' } ] } ], @@ -263,7 +263,7 @@ module.exports = { { text: 'v3.x', items: [ - { text: 'v4.x', link: 'https://next.vuex.vuejs.org/' } + { text: 'v4.x', link: 'https://vuex.vuejs.org/' } ] } ], @@ -313,7 +313,7 @@ module.exports = { { text: 'v3.x', items: [ - { text: 'v4.x', link: 'https://next.vuex.vuejs.org/ptbr/' } + { text: 'v4.x', link: 'https://vuex.vuejs.org/ptbr/' } ] } ], @@ -363,7 +363,7 @@ module.exports = { { text: 'v3.x', items: [ - { text: 'v4.x', link: 'https://next.vuex.vuejs.org/' } + { text: 'v4.x', link: 'https://vuex.vuejs.org/' } ] } ], From ddf196969379d038e5ce6250233b1a181197a2ca Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Fri, 20 Jan 2023 00:56:08 +0800 Subject: [PATCH 50/50] docs: fix links to v2.vuejs.org (#2207) --- docs/README.md | 2 +- docs/api/README.md | 2 +- docs/fr/README.md | 2 +- docs/guide/state.md | 4 ++-- docs/zh/README.md | 2 +- docs/zh/api/README.md | 2 +- docs/zh/guide/state.md | 4 ++-- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/README.md b/docs/README.md index 682df03f3..e57041f27 100644 --- a/docs/README.md +++ b/docs/README.md @@ -66,6 +66,6 @@ If you want to learn Vuex in an interactive way you can check out this [Vuex cou Vuex helps us deal with shared state management with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity. -If you've never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That's perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple [store pattern](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch) may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There's a good quote from Dan Abramov, the author of Redux: +If you've never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That's perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple [store pattern](https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch) may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There's a good quote from Dan Abramov, the author of Redux: > Flux libraries are like glasses: you’ll know when you need them. diff --git a/docs/api/README.md b/docs/api/README.md index 49439f15b..9a4bd43f2 100644 --- a/docs/api/README.md +++ b/docs/api/README.md @@ -168,7 +168,7 @@ const store = new Vuex.Store({ ...options }) - `watch(fn: Function, callback: Function, options?: Object): Function` - Reactively watch `fn`'s return value, and call the callback when the value changes. `fn` receives the store's state as the first argument, and getters as the second argument. Accepts an optional options object that takes the same options as [Vue's `vm.$watch` method](https://vuejs.org/v2/api/#vm-watch). + Reactively watch `fn`'s return value, and call the callback when the value changes. `fn` receives the store's state as the first argument, and getters as the second argument. Accepts an optional options object that takes the same options as [Vue's `vm.$watch` method](https://v2.vuejs.org/v2/api/#vm-watch). To stop watching, call the returned unwatch function. diff --git a/docs/fr/README.md b/docs/fr/README.md index c381c4e2b..a8675b6c4 100644 --- a/docs/fr/README.md +++ b/docs/fr/README.md @@ -60,5 +60,5 @@ Si vous voulez apprendre Vuex de manière interactive, jetez un oeil à ce [cour Bien que Vuex nous aide à gérer un état global partagé, il apporte aussi le cout de nouveaux concepts et _abstraction de code_ (« boilerplate »). C'est un compromis entre la productivité à court terme et à long terme. -Si vous n'avez jamais créé une _application monopage_ à grande échelle et que vous sautez directement dans Vuex, cela peut paraitre verbeux et intimidant. C'est parfaitement normal ; si votre application est simple, vous vous en sortirez sans doute très bien sans Vuex. Un simple [canal d'évènement global](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch) pourrait très bien vous suffire. Mais si vous devez créer une application monopage à moyenne ou grande échelle, il y a des chances que vous vous trouviez dans des situations qui vous feront vous interroger sur une meilleure gestion de l'état global, détaché de votre composant Vue, et Vuex sera naturellement la prochaine étape pour vous. Voici une bonne citation de Dan Abramov, l'auteur de Redux : +Si vous n'avez jamais créé une _application monopage_ à grande échelle et que vous sautez directement dans Vuex, cela peut paraitre verbeux et intimidant. C'est parfaitement normal ; si votre application est simple, vous vous en sortirez sans doute très bien sans Vuex. Un simple [canal d'évènement global](https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch) pourrait très bien vous suffire. Mais si vous devez créer une application monopage à moyenne ou grande échelle, il y a des chances que vous vous trouviez dans des situations qui vous feront vous interroger sur une meilleure gestion de l'état global, détaché de votre composant Vue, et Vuex sera naturellement la prochaine étape pour vous. Voici une bonne citation de Dan Abramov, l'auteur de Redux : > « Les librairies Flux, c'est comme les lunettes : vous saurez quand vous en aurez besoin. » diff --git a/docs/guide/state.md b/docs/guide/state.md index 01a9d7d5a..bc9cbc120 100644 --- a/docs/guide/state.md +++ b/docs/guide/state.md @@ -8,11 +8,11 @@ Vuex uses a **single state tree** - that is, this single object contains all you The single state tree does not conflict with modularity - in later chapters we will discuss how to split your state and mutations into sub modules. -The data you store in Vuex follows the same rules as the `data` in a Vue instance, ie the state object must be plain. **See also:** [Vue#data](https://vuejs.org/v2/api/#data). +The data you store in Vuex follows the same rules as the `data` in a Vue instance, ie the state object must be plain. **See also:** [Vue#data](https://v2.vuejs.org/v2/api/#data). ## Getting Vuex State into Vue Components -So how do we display state inside the store in our Vue components? Since Vuex stores are reactive, the simplest way to "retrieve" state from it is simply returning some store state from within a [computed property](https://vuejs.org/guide/computed.html): +So how do we display state inside the store in our Vue components? Since Vuex stores are reactive, the simplest way to "retrieve" state from it is simply returning some store state from within a [computed property](https://v2.vuejs.org/guide/computed.html): ```js // let's create a Counter component diff --git a/docs/zh/README.md b/docs/zh/README.md index 24a0bb4cc..93bc802d9 100644 --- a/docs/zh/README.md +++ b/docs/zh/README.md @@ -60,6 +60,6 @@ new Vue({ Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 -如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 [store 模式](https://cn.vuejs.org/v2/guide/state-management.html#简单状态管理起步使用)就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是: +如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 [store 模式](https://v2.cn.vuejs.org/v2/guide/state-management.html#简单状态管理起步使用)就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是: > Flux 架构就像眼镜:您自会知道什么时候需要它。 diff --git a/docs/zh/api/README.md b/docs/zh/api/README.md index e9dd811fc..fa16c927b 100644 --- a/docs/zh/api/README.md +++ b/docs/zh/api/README.md @@ -170,7 +170,7 @@ const store = new Vuex.Store({ ...options }) - `watch(fn: Function, callback: Function, options?: Object): Function` -  响应式地侦听 `fn` 的返回值,当值改变时调用回调函数。`fn` 接收 store 的 state 作为第一个参数,其 getter 作为第二个参数。最后接收一个可选的对象参数表示 Vue 的 [`vm.$watch`](https://cn.vuejs.org/v2/api/#vm-watch) 方法的参数。 +  响应式地侦听 `fn` 的返回值,当值改变时调用回调函数。`fn` 接收 store 的 state 作为第一个参数,其 getter 作为第二个参数。最后接收一个可选的对象参数表示 Vue 的 [`vm.$watch`](https://v2.cn.vuejs.org/v2/api/#vm-watch) 方法的参数。  要停止侦听,调用此方法返回的函数即可停止侦听。 diff --git a/docs/zh/guide/state.md b/docs/zh/guide/state.md index c143c16b5..546fd5458 100644 --- a/docs/zh/guide/state.md +++ b/docs/zh/guide/state.md @@ -8,11 +8,11 @@ Vuex 使用**单一状态树**——是的,用一个对象就包含了全部 单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。 -存储在 Vuex 中的数据和 Vue 实例中的 `data` 遵循相同的规则,例如状态对象必须是纯粹 (plain) 的。**参考:**[Vue#data](https://cn.vuejs.org/v2/api/#data)。 +存储在 Vuex 中的数据和 Vue 实例中的 `data` 遵循相同的规则,例如状态对象必须是纯粹 (plain) 的。**参考:**[Vue#data](https://v2.cn.vuejs.org/v2/api/#data)。 ## 在 Vue 组件中获得 Vuex 状态 -那么我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在[计算属性](https://cn.vuejs.org/guide/computed.html)中返回某个状态: +那么我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在[计算属性](https://v2.cn.vuejs.org/guide/computed.html)中返回某个状态: ``` js // 创建一个 Counter 组件