Skip to content

docs(ru): add Vuex 4.x translation #2205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 25 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
docs(ru): update plugins.md
  • Loading branch information
Amirzhan Aliyev committed Dec 27, 2022
commit 0ac8f33521845780b2d93c561fb3e6dfb3f5218d
77 changes: 31 additions & 46 deletions docs/ru/guide/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@ const myPlugin = store => {
store.subscribe((mutation, state) => {
// вызывается после каждой мутации
// мутация передаётся в формате `{ type, payload }`.
});
};
})
}
```

Используются плагины так:

```js
const store = new Vuex.Store({
const store = createStore({
// ...
plugins: [myPlugin]
});
})
```

## Вызов мутаций из плагинов
Expand All @@ -33,74 +33,70 @@ const store = new Vuex.Store({
export default function createWebSocketPlugin(socket) {
return store => {
socket.on('data', data => {
store.commit('receiveData', data);
});
store.commit('receiveData', data)
})
store.subscribe(mutation => {
if (mutation.type === 'UPDATE_DATA') {
socket.emit('update', mutation.payload);
socket.emit('update', mutation.payload)
}
});
};
})
}
}
```

```js
const plugin = createWebSocketPlugin(socket);
const plugin = createWebSocketPlugin(socket)

const store = new Vuex.Store({
const store = createStore({
state,
mutations,
plugins: [plugin]
});
})
```

## Снятие слепков состояния

Иногда плагину может потребоваться "снять слепок" состояния приложения или сравнить состояния "до" и "после" мутации. Для этого используйте глубокое копирование объекта состояния:
Иногда плагину может потребоваться «снять слепок» состояния приложения или сравнить состояния «до» и «после» мутации. Для этого используйте глубокое копирование объекта состояния:

```js
const myPluginWithSnapshot = store => {
let prevState = _.cloneDeep(store.state);
let prevState = _.cloneDeep(store.state)
store.subscribe((mutation, state) => {
let nextState = _.cloneDeep(state);
let nextState = _.cloneDeep(state)

// сравнение `prevState` и `nextState`...

// сохранение состояния для следующей мутации
prevState = nextState;
});
};
prevState = nextState
})
}
```

**Плагины, снимающие слепки, должны использоваться только на этапе разработки.** При использовании webpack или Browserify, мы можем отдать этот момент на их откуп:
**Плагины, снимающие слепки, должны использоваться только на этапе разработки.** При использовании webpack или Browserify, можно отдать этот момент на их откуп:

```js
const store = new Vuex.Store({
const store = createStore({
// ...
plugins: process.env.NODE_ENV !== 'production' ? [myPluginWithSnapshot] : []
});
plugins: process.env.NODE_ENV !== 'production'
? [myPluginWithSnapshot]
: []
})
```

Плагин будет использоваться по умолчанию. В production-окружении вам понадобится [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) для webpack, или [envify](https://github.com/hughsk/envify) для Browserify, чтобы изменить значение `process.env.NODE_ENV !== 'production'` на `false` в финальной сборке.
Плагин будет использоваться по умолчанию. В 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), вам он скорее всего не понадобится

В комплекте с Vuex идёт плагин логирования, который можно использовать при отладке:

```js
import { createLogger } from 'vuex'

const store = new Vuex.Store({
const store = createStore({
plugins: [createLogger()]
});
})
```

:::warning ВНИМАНИЕ
До версии 3.5.0 функция `createLogger` экспортировалась по пути `vuex/dist/logger`. Ознакомьтесь с разделом "Vuex до версии 3.5.0" на этой странице.
:::

Функция `createLogger` принимает следующие опции:

```js
Expand All @@ -109,7 +105,7 @@ const logger = createLogger({
filter(mutation, stateBefore, stateAfter) {
// возвращает `true`, если мутация должна быть залогирована
// `mutation` — это объект `{ type, payload }`
return mutation.type !== 'aBlocklistedMutation';
return mutation.type !== 'aBlocklistedMutation'
},
actionFilter (action, state) {
// аналогично `filter`, но для действий
Expand All @@ -119,12 +115,12 @@ const logger = createLogger({
transformer(state) {
// обработать состояние перед логированием
// например, позволяет рассматривать только конкретное поддерево
return state.subTree;
return state.subTree
},
mutationTransformer(mutation) {
// мутации логируются в формате `{ type, payload }`,
// но это можно изменить
return mutation.type;
return mutation.type
},
actionTransformer (action) {
// аналогично `mutationTransformer`, но для действий
Expand All @@ -133,20 +129,9 @@ const logger = createLogger({
logActions: true, // логирование действий
logMutations: true, // логирование мутаций
logger: console // реализация API `console`, по умолчанию `console`
});
})
```

Логирующий плагин также можно включить напрямую используя отдельный тег `<script>`, помещающий функцию `createVuexLogger` в глобальное пространство имён.

Обратите внимание, что этот плагин делает слепки состояний, поэтому использовать его стоит только на этапе разработки.

### Vuex до версии 3.5.0

До версии 3.5.0 функция `createLogger` экспортировалась по следующему пути `vuex/dist/logger`.

```js
import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
plugins: [createLogger()]
})
```